├── .editorconfig ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── LICENSE.md ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── public └── favicon.ico ├── src ├── app │ ├── accordion │ │ ├── accordion.component.css │ │ ├── accordion.component.html │ │ ├── accordion.component.spec.ts │ │ └── accordion.component.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.config.server.ts │ ├── app.config.ts │ ├── app.routes.server.ts │ ├── app.routes.ts │ ├── carousel │ │ ├── carousel.component.css │ │ ├── carousel.component.html │ │ ├── carousel.component.spec.ts │ │ └── carousel.component.ts │ ├── collapse │ │ ├── collapse.component.css │ │ ├── collapse.component.html │ │ ├── collapse.component.spec.ts │ │ └── collapse.component.ts │ ├── datepicker │ │ ├── datepicker.component.css │ │ ├── datepicker.component.html │ │ ├── datepicker.component.spec.ts │ │ └── datepicker.component.ts │ ├── dismiss │ │ ├── dismiss.component.css │ │ ├── dismiss.component.html │ │ ├── dismiss.component.spec.ts │ │ └── dismiss.component.ts │ ├── drawer │ │ ├── drawer.component.css │ │ ├── drawer.component.html │ │ ├── drawer.component.spec.ts │ │ └── drawer.component.ts │ ├── dropdown │ │ ├── dropdown.component.css │ │ ├── dropdown.component.html │ │ ├── dropdown.component.spec.ts │ │ └── dropdown.component.ts │ ├── events │ │ ├── events.component.css │ │ ├── events.component.html │ │ ├── events.component.spec.ts │ │ └── events.component.ts │ ├── home │ │ ├── home.component.css │ │ ├── home.component.html │ │ ├── home.component.spec.ts │ │ └── home.component.ts │ ├── modal │ │ ├── modal.component.css │ │ ├── modal.component.html │ │ ├── modal.component.spec.ts │ │ └── modal.component.ts │ ├── popover │ │ ├── popover.component.css │ │ ├── popover.component.html │ │ ├── popover.component.spec.ts │ │ └── popover.component.ts │ ├── speed-dial │ │ ├── speed-dial.component.css │ │ ├── speed-dial.component.html │ │ ├── speed-dial.component.spec.ts │ │ └── speed-dial.component.ts │ ├── tabs │ │ ├── tabs.component.css │ │ ├── tabs.component.html │ │ ├── tabs.component.spec.ts │ │ └── tabs.component.ts │ └── tooltip │ │ ├── tooltip.component.css │ │ ├── tooltip.component.html │ │ ├── tooltip.component.spec.ts │ │ └── tooltip.component.ts ├── index.html ├── main.server.ts ├── main.ts ├── server.ts ├── services │ └── flowbite.service.ts └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Bergside 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Tailwind 4 Angular Starter 2 | 3 | [Follow this guide](https://flowbite.com/docs/getting-started/angular/) to learn how to set up a new Angular project with Tailwind CSS and integrate the open-source UI components from the Flowbite Library. 4 | 5 | ## Create Angular project 6 | 7 | The recommended and quickest way to get started with creating a new Angular project is by installing the official CLI tool by running the following command in your terminal: 8 | 9 | ```bash 10 | npm install -g @angular/cli 11 | ``` 12 | 13 | This command will make the Angular CLI available on your local computer. 14 | 15 | 1. Run the following command to create a new Angular project: 16 | 17 | ```bash 18 | ng new flowbite-app 19 | ``` 20 | 21 | You can follow the instructions from the CLI prompts to select the options that you want to choose when creating a new project - you should select "CSS" when asked. 22 | 23 | This command will create a new folder called `flowbite-app` where you have all the necessary source files to start a new local and production-ready Angular project. 24 | 25 | 2. Run the `ng serve --open` command in your terminal to start a local server: 26 | 27 | ```bash 28 | ng serve --open 29 | ``` 30 | 31 | This will create a local development server and automatically open a new tab on the `localhost:4200` port by adding the `--open` flag to the command. 32 | 33 | Congratulations! Now you have a fully working Angular project installed and configured. 34 | 35 | ## Install Tailwind CSS 36 | 37 | Now that you've successfully installed and configured an Angular project we can proceed with installing the most popular utility-first CSS framework called Tailwind. 38 | 39 | 1. Install Tailwind CSS and Post CSS via NPM by running the following command: 40 | 41 | ```bash 42 | npm install tailwindcss @tailwindcss/postcss postcss --save 43 | ``` 44 | 45 | This command will install all the dependencies of Tailwind CSS available in your `package.json` file. 46 | 47 | 2. Create a `.postcssrc.json` file in the root folder of your project and include the Tailwind PostCSS plugin: 48 | 49 | ```javascript 50 | { 51 | "plugins": { 52 | "@tailwindcss/postcss": {} 53 | } 54 | } 55 | ``` 56 | 57 | 3. Import the core Tailwind directive inside the `styles.css` file: 58 | 59 | ```css 60 | /* You can add global styles to this file, and also import other style files */ 61 | 62 | @import "tailwindcss"; 63 | ``` 64 | 65 | 5. Start a local development server on Angular by running `ng serve --open`. If you already had one open then you need to restart it to allow Angular to internally set up the new configuration. 66 | 67 | Congratulations! You can now start using the utility classes from Tailwind CSS inside your Angular project. 68 | 69 | ## Install Flowbite 70 | 71 | Now that you have both Angular and Tailwind CSS configured for your web application project you can proceed by installing the Flowbite Library to start leveraging the interactive UI components such as navbars, modals, cards, buttons, and more to build user interfaces faster with Tailwind CSS support. 72 | 73 | 1. Install Flowbite as a dependency using NPM by running the following command: 74 | 75 | ```bash 76 | npm install flowbite --save 77 | ``` 78 | 79 | 2. Import the default theme variables from Flowbite inside your main `input.css` CSS file: 80 | 81 | ```css 82 | @import "flowbite/src/themes/default"; 83 | ``` 84 | 85 | 3. Import the Flowbite plugin file in your CSS: 86 | 87 | ```css 88 | @plugin "flowbite/plugin"; 89 | ``` 90 | 91 | 4. Configure the source files of Flowbite in your CSS: 92 | 93 | ```css 94 | @source "../node_modules/flowbite"; 95 | ``` 96 | 97 | 5. Update the `app.component.ts` file to use the `initFlowbite` function to enable the interactive components via data attributes: 98 | 99 | ```javascript 100 | import { Component } from '@angular/core'; 101 | import { OnInit } from '@angular/core'; 102 | import { initFlowbite } from 'flowbite'; 103 | 104 | @Component({ 105 | selector: 'app-root', 106 | templateUrl: './app.component.html', 107 | styleUrls: ['./app.component.css'] 108 | }) 109 | export class AppComponent implements OnInit { 110 | title = 'web-app'; 111 | 112 | ngOnInit(): void { 113 | initFlowbite(); 114 | } 115 | } 116 | ``` 117 | 118 | This will allow you to enable components such as the modals, navigation bars, dropdowns to dynamically set up the functionality via our data attributes interface. 119 | 120 | ## Using with Angular SSR 121 | 122 | To enable using Flowbite with SSR (Server-Side Rendering) you need to create a custom service that will handle the dynamic import of Flowbite: 123 | 124 | ```javascript 125 | // src/app/services/flowbite.service.ts 126 | import { Injectable, Inject, PLATFORM_ID } from '@angular/core'; 127 | import { isPlatformBrowser } from '@angular/common'; 128 | 129 | @Injectable({ 130 | providedIn: 'root' 131 | }) 132 | export class FlowbiteService { 133 | constructor(@Inject(PLATFORM_ID) private platformId: any) {} 134 | 135 | loadFlowbite(callback: (flowbite: any) => void) { 136 | if (isPlatformBrowser(this.platformId)) { 137 | import('flowbite').then(flowbite => { 138 | callback(flowbite); 139 | }); 140 | } 141 | } 142 | } 143 | ``` 144 | 145 | **Important**: if you are using SSR make sure that this is the only way you're importing Flowbite in your Angular application to prevent the document object not being available on the server side. 146 | 147 | After that, you can use this service in your component to start using the Flowbite API and data attributes: 148 | 149 | ```javascript 150 | // src/app/components/some-component/some-component.component.ts 151 | import { Component, OnInit } from '@angular/core'; 152 | import { FlowbiteService } from '../../services/flowbite.service'; 153 | 154 | @Component({ 155 | selector: 'app-some-component', 156 | templateUrl: './some-component.component.html', 157 | styleUrls: ['./some-component.component.css'] 158 | }) 159 | export class SomeComponent implements OnInit { 160 | constructor(private flowbiteService: FlowbiteService) {} 161 | 162 | ngOnInit(): void { 163 | this.flowbiteService.loadFlowbite((flowbite) => { 164 | initFlowbite(); 165 | }); 166 | } 167 | } 168 | ``` 169 | 170 | This will prevent the "document is undefined" error that happens after upgrading to `v2.4.1` for SSR applications. 171 | 172 | ## UI components 173 | 174 | Now that you have installed all of the frameworks and libraries you can start using the whole collection of UI components and templates from the [Flowbite UI Library](https://flowbite.com/docs/getting-started/introduction/) and [Blocks](https://flowbite.com/blocks/marketing/feature/). 175 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "flowbite-app": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/flowbite-app", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [], 33 | "server": "src/main.server.ts", 34 | "outputMode": "server", 35 | "ssr": { 36 | "entry": "src/server.ts" 37 | } 38 | }, 39 | "configurations": { 40 | "production": { 41 | "budgets": [ 42 | { 43 | "type": "initial", 44 | "maximumWarning": "500kB", 45 | "maximumError": "1MB" 46 | }, 47 | { 48 | "type": "anyComponentStyle", 49 | "maximumWarning": "4kB", 50 | "maximumError": "8kB" 51 | } 52 | ], 53 | "outputHashing": "all" 54 | }, 55 | "development": { 56 | "optimization": false, 57 | "extractLicenses": false, 58 | "sourceMap": true 59 | } 60 | }, 61 | "defaultConfiguration": "production" 62 | }, 63 | "serve": { 64 | "builder": "@angular-devkit/build-angular:dev-server", 65 | "configurations": { 66 | "production": { 67 | "buildTarget": "flowbite-app:build:production" 68 | }, 69 | "development": { 70 | "buildTarget": "flowbite-app:build:development" 71 | } 72 | }, 73 | "defaultConfiguration": "development" 74 | }, 75 | "extract-i18n": { 76 | "builder": "@angular-devkit/build-angular:extract-i18n" 77 | }, 78 | "test": { 79 | "builder": "@angular-devkit/build-angular:karma", 80 | "options": { 81 | "polyfills": [ 82 | "zone.js", 83 | "zone.js/testing" 84 | ], 85 | "tsConfig": "tsconfig.spec.json", 86 | "assets": [ 87 | { 88 | "glob": "**/*", 89 | "input": "public" 90 | } 91 | ], 92 | "styles": [ 93 | "src/styles.css" 94 | ], 95 | "scripts": [] 96 | } 97 | } 98 | } 99 | } 100 | }, 101 | "cli": { 102 | "analytics": "0c1a4a7c-f19f-486b-a00e-99cdfabba783" 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-angular-starter", 3 | "version": "2.0.0", 4 | "description": "A free and open-source starter project to help you get started with the core Flowbite Library components and Angular", 5 | "license": "MIT", 6 | "repository": "https://github.com/themesberg/tailwind-angular-starter", 7 | "homepage": "https://flowbite.com/docs/getting-started/angular/", 8 | "contributors": [ 9 | "Zoltán Szőgyényi (https://x.com/zoltanszogyenyi)" 10 | ], 11 | "author": "Bergside Inc.", 12 | "scripts": { 13 | "ng": "ng", 14 | "start": "ng serve", 15 | "build": "ng build", 16 | "watch": "ng build --watch --configuration development", 17 | "test": "ng test", 18 | "serve:ssr:flowbite-app": "node dist/flowbite-app/server/server.mjs" 19 | }, 20 | "private": true, 21 | "dependencies": { 22 | "@angular/common": "^19.2.0", 23 | "@angular/compiler": "^19.2.0", 24 | "@angular/core": "^19.2.0", 25 | "@angular/forms": "^19.2.0", 26 | "@angular/platform-browser": "^19.2.0", 27 | "@angular/platform-browser-dynamic": "^19.2.0", 28 | "@angular/platform-server": "^19.2.0", 29 | "@angular/router": "^19.2.0", 30 | "@angular/ssr": "^19.2.0", 31 | "@tailwindcss/postcss": "^4.0.9", 32 | "express": "^4.18.2", 33 | "flowbite": "^3.1.2", 34 | "postcss": "^8.5.3", 35 | "rxjs": "~7.8.0", 36 | "tailwindcss": "^4.0.9", 37 | "tslib": "^2.3.0", 38 | "zone.js": "~0.15.0" 39 | }, 40 | "devDependencies": { 41 | "@angular-devkit/build-angular": "^19.2.0", 42 | "@angular/cli": "^19.2.0", 43 | "@angular/compiler-cli": "^19.2.0", 44 | "@types/express": "^4.17.17", 45 | "@types/jasmine": "~5.1.0", 46 | "@types/node": "^18.18.0", 47 | "jasmine-core": "~5.6.0", 48 | "karma": "~6.4.0", 49 | "karma-chrome-launcher": "~3.2.0", 50 | "karma-coverage": "~2.2.0", 51 | "karma-jasmine": "~5.1.0", 52 | "karma-jasmine-html-reporter": "~2.1.0", 53 | "typescript": "~5.7.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/public/favicon.ico -------------------------------------------------------------------------------- /src/app/accordion/accordion.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/accordion/accordion.component.css -------------------------------------------------------------------------------- /src/app/accordion/accordion.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | 30 |

31 | 56 |

57 | 82 |

83 | 106 |

107 | 132 |

133 | 172 |
173 |
174 |
175 | -------------------------------------------------------------------------------- /src/app/accordion/accordion.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AccordionComponent } from './accordion.component'; 4 | 5 | describe('AccordionComponent', () => { 6 | let component: AccordionComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [AccordionComponent] 12 | }); 13 | fixture = TestBed.createComponent(AccordionComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/accordion/accordion.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-accordion', 5 | templateUrl: './accordion.component.html', 6 | styleUrls: ['./accordion.component.css'] 7 | }) 8 | export class AccordionComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'angular-test' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('angular-test'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-test'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | imports: [RouterOutlet], 7 | templateUrl: './app.component.html', 8 | styleUrl: './app.component.css' 9 | }) 10 | export class AppComponent { 11 | title = 'angular-test'; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/app.config.server.ts: -------------------------------------------------------------------------------- 1 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; 2 | import { provideServerRendering } from '@angular/platform-server'; 3 | import { provideServerRouting } from '@angular/ssr'; 4 | import { appConfig } from './app.config'; 5 | import { serverRoutes } from './app.routes.server'; 6 | 7 | const serverConfig: ApplicationConfig = { 8 | providers: [ 9 | provideServerRendering(), 10 | provideServerRouting(serverRoutes) 11 | ] 12 | }; 13 | 14 | export const config = mergeApplicationConfig(appConfig, serverConfig); 15 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; 6 | 7 | export const appConfig: ApplicationConfig = { 8 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())] 9 | }; 10 | -------------------------------------------------------------------------------- /src/app/app.routes.server.ts: -------------------------------------------------------------------------------- 1 | import { RenderMode, ServerRoute } from '@angular/ssr'; 2 | 3 | export const serverRoutes: ServerRoute[] = [ 4 | { 5 | path: '**', 6 | renderMode: RenderMode.Prerender 7 | } 8 | ]; 9 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { HomeComponent } from './home/home.component'; 3 | import { EventsComponent } from './events/events.component'; 4 | import { AccordionComponent } from './accordion/accordion.component'; 5 | import { CarouselComponent } from './carousel/carousel.component'; 6 | import { CollapseComponent } from './collapse/collapse.component'; 7 | import { DismissComponent } from './dismiss/dismiss.component'; 8 | import { DrawerComponent } from './drawer/drawer.component'; 9 | import { DatepickerComponent } from './datepicker/datepicker.component'; 10 | import { DropdownComponent } from './dropdown/dropdown.component'; 11 | import { ModalComponent } from './modal/modal.component'; 12 | import { PopoverComponent } from './popover/popover.component'; 13 | import { SpeedDialComponent } from './speed-dial/speed-dial.component'; 14 | import { TabsComponent } from './tabs/tabs.component'; 15 | import { TooltipComponent } from './tooltip/tooltip.component'; 16 | 17 | export const routes: Routes = [ 18 | { path: '', component: HomeComponent }, 19 | { path: 'events', component: EventsComponent }, 20 | { path: 'accordion', component: AccordionComponent }, 21 | { path: 'carousel', component: CarouselComponent }, 22 | { path: 'collapse', component: CollapseComponent }, 23 | { path: 'datepicker', component: DatepickerComponent }, 24 | { path: 'dismiss', component: DismissComponent }, 25 | { path: 'drawer', component: DrawerComponent }, 26 | { path: 'dropdown', component: DropdownComponent }, 27 | { path: 'modal', component: ModalComponent }, 28 | { path: 'popover', component: PopoverComponent }, 29 | { path: 'speed-dial', component: SpeedDialComponent }, 30 | { path: 'tabs', component: TabsComponent }, 31 | { path: 'tooltip', component: TooltipComponent }, 32 | ]; -------------------------------------------------------------------------------- /src/app/carousel/carousel.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/carousel/carousel.component.css -------------------------------------------------------------------------------- /src/app/carousel/carousel.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 141 |
142 |
143 | -------------------------------------------------------------------------------- /src/app/carousel/carousel.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CarouselComponent } from './carousel.component'; 4 | 5 | describe('CarouselComponent', () => { 6 | let component: CarouselComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [CarouselComponent] 12 | }); 13 | fixture = TestBed.createComponent(CarouselComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/carousel/carousel.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-carousel', 5 | templateUrl: './carousel.component.html', 6 | styleUrls: ['./carousel.component.css'] 7 | }) 8 | export class CarouselComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/collapse/collapse.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/collapse/collapse.component.css -------------------------------------------------------------------------------- /src/app/collapse/collapse.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/collapse/collapse.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CollapseComponent } from './collapse.component'; 4 | 5 | describe('CollapseComponent', () => { 6 | let component: CollapseComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [CollapseComponent] 12 | }); 13 | fixture = TestBed.createComponent(CollapseComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/collapse/collapse.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-collapse', 5 | templateUrl: './collapse.component.html', 6 | styleUrls: ['./collapse.component.css'] 7 | }) 8 | export class CollapseComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/datepicker/datepicker.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/datepicker/datepicker.component.css -------------------------------------------------------------------------------- /src/app/datepicker/datepicker.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 8 |
9 | 10 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /src/app/datepicker/datepicker.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DatepickerComponent } from './datepicker.component'; 4 | 5 | describe('DatepickerComponent', () => { 6 | let component: DatepickerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [DatepickerComponent] 12 | }); 13 | fixture = TestBed.createComponent(DatepickerComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/datepicker/datepicker.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-datepicker', 5 | templateUrl: './datepicker.component.html', 6 | styleUrls: ['./datepicker.component.css'] 7 | }) 8 | export class DatepickerComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/dismiss/dismiss.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/dismiss/dismiss.component.css -------------------------------------------------------------------------------- /src/app/dismiss/dismiss.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 18 |
19 |
20 | -------------------------------------------------------------------------------- /src/app/dismiss/dismiss.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DismissComponent } from './dismiss.component'; 4 | 5 | describe('DismissComponent', () => { 6 | let component: DismissComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [DismissComponent] 12 | }); 13 | fixture = TestBed.createComponent(DismissComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/dismiss/dismiss.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { OnInit } from '@angular/core'; 3 | import { initFlowbite } from 'flowbite'; 4 | import { FlowbiteService } from '../../services/flowbite.service'; 5 | 6 | @Component({ 7 | selector: 'app-dismiss', 8 | templateUrl: './dismiss.component.html', 9 | styleUrls: ['./dismiss.component.css'] 10 | }) 11 | export class DismissComponent implements OnInit { 12 | title = 'web-app'; 13 | constructor(private flowbiteService: FlowbiteService) {} 14 | 15 | ngOnInit(): void { 16 | this.flowbiteService.loadFlowbite((flowbite) => { 17 | initFlowbite(); 18 | }); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/drawer/drawer.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/drawer/drawer.component.css -------------------------------------------------------------------------------- /src/app/drawer/drawer.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 7 |
8 | 9 | 10 |
11 |
Info
14 | 20 |

Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.

21 |
22 | Learn more 23 | Get access 26 |
27 |
28 | -------------------------------------------------------------------------------- /src/app/drawer/drawer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DrawerComponent } from './drawer.component'; 4 | 5 | describe('DrawerComponent', () => { 6 | let component: DrawerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [DrawerComponent] 12 | }); 13 | fixture = TestBed.createComponent(DrawerComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/drawer/drawer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-drawer', 5 | templateUrl: './drawer.component.html', 6 | styleUrls: ['./drawer.component.css'] 7 | }) 8 | export class DrawerComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/dropdown/dropdown.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/dropdown/dropdown.component.css -------------------------------------------------------------------------------- /src/app/dropdown/dropdown.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 26 | 27 | 65 |
66 |
67 | -------------------------------------------------------------------------------- /src/app/dropdown/dropdown.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DropdownComponent } from './dropdown.component'; 4 | 5 | describe('DropdownComponent', () => { 6 | let component: DropdownComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [DropdownComponent] 12 | }); 13 | fixture = TestBed.createComponent(DropdownComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/dropdown/dropdown.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dropdown', 5 | templateUrl: './dropdown.component.html', 6 | styleUrls: ['./dropdown.component.css'] 7 | }) 8 | export class DropdownComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/events/events.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/events/events.component.css -------------------------------------------------------------------------------- /src/app/events/events.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 6 | 10 |
11 | 12 | 61 | 62 | 63 |
64 | 67 |
68 | 69 | 70 |
71 |
Info
74 | 80 | 81 |

Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.

82 |
83 | Learn more 84 | Get access 87 |
88 |
89 | 90 |
-------------------------------------------------------------------------------- /src/app/events/events.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { EventsComponent } from './events.component'; 4 | 5 | describe('EventsComponent', () => { 6 | let component: EventsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [EventsComponent] 12 | }); 13 | fixture = TestBed.createComponent(EventsComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/events/events.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { OnInit } from '@angular/core'; 3 | import { initFlowbite } from 'flowbite'; 4 | import { FlowbiteService } from '../../services/flowbite.service'; 5 | 6 | @Component({ 7 | selector: 'app-events', 8 | templateUrl: './events.component.html', 9 | styleUrls: ['./events.component.css'] 10 | }) 11 | export class EventsComponent implements OnInit { 12 | title = 'web-app'; 13 | constructor(private flowbiteService: FlowbiteService) {} 14 | 15 | ngOnInit(): void { 16 | this.flowbiteService.loadFlowbite((flowbite) => { 17 | initFlowbite(); 18 | }); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/home/home.component.css -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Flowbite + Angular + Tailwind CSS Starter

4 |
5 | Home 6 | Data attribute events 7 | Accordion 8 | Carousel 9 | Modal 10 | Navbar (collapse) 11 | Speed Dial 12 | Dismiss 13 | Drawer 14 | Dropdown 15 | Popover 16 | Tabs 17 | Tooltip 18 | Datepicker 19 |
20 |

Learn more about Flowbite + Angular here and view all Flowbite UI components here.

21 |
22 |
23 | -------------------------------------------------------------------------------- /src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [HomeComponent] 12 | }); 13 | fixture = TestBed.createComponent(HomeComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/modal/modal.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/modal/modal.component.css -------------------------------------------------------------------------------- /src/app/modal/modal.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 7 | 8 | 11 | 12 | 13 | 46 | 47 |
48 |
49 | 50 |
51 |
52 | -------------------------------------------------------------------------------- /src/app/modal/modal.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ModalComponent } from './modal.component'; 4 | 5 | describe('ModalComponent', () => { 6 | let component: ModalComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ModalComponent] 12 | }); 13 | fixture = TestBed.createComponent(ModalComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/modal/modal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { OnInit } from '@angular/core'; 3 | import { initFlowbite } from 'flowbite'; 4 | import { FlowbiteService } from '../../services/flowbite.service'; 5 | 6 | @Component({ 7 | selector: 'app-modal', 8 | templateUrl: './modal.component.html', 9 | styleUrls: ['./modal.component.css'] 10 | }) 11 | export class ModalComponent implements OnInit { 12 | title = 'web-app'; 13 | constructor(private flowbiteService: FlowbiteService) {} 14 | 15 | ngOnInit(): void { 16 | this.flowbiteService.loadFlowbite((flowbite) => { 17 | initFlowbite(); 18 | }); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/popover/popover.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/popover/popover.component.css -------------------------------------------------------------------------------- /src/app/popover/popover.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 | 28 |
29 |
30 | -------------------------------------------------------------------------------- /src/app/popover/popover.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PopoverComponent } from './popover.component'; 4 | 5 | describe('PopoverComponent', () => { 6 | let component: PopoverComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [PopoverComponent] 12 | }); 13 | fixture = TestBed.createComponent(PopoverComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/popover/popover.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-popover', 5 | templateUrl: './popover.component.html', 6 | styleUrls: ['./popover.component.css'] 7 | }) 8 | export class PopoverComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/speed-dial/speed-dial.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/speed-dial/speed-dial.component.css -------------------------------------------------------------------------------- /src/app/speed-dial/speed-dial.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 48 | 54 |
55 | -------------------------------------------------------------------------------- /src/app/speed-dial/speed-dial.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SpeedDialComponent } from './speed-dial.component'; 4 | 5 | describe('SpeedDialComponent', () => { 6 | let component: SpeedDialComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [SpeedDialComponent] 12 | }); 13 | fixture = TestBed.createComponent(SpeedDialComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/speed-dial/speed-dial.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-speed-dial', 5 | templateUrl: './speed-dial.component.html', 6 | styleUrls: ['./speed-dial.component.css'] 7 | }) 8 | export class SpeedDialComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/tabs/tabs.component.css -------------------------------------------------------------------------------- /src/app/tabs/tabs.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
    10 | 23 | 36 | 49 |
  • 50 | 61 |
    • 62 |
63 |
64 |
65 | 80 | 95 | 110 | 125 |
126 |
127 |
128 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TabsComponent } from './tabs.component'; 4 | 5 | describe('TabsComponent', () => { 6 | let component: TabsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [TabsComponent] 12 | }); 13 | fixture = TestBed.createComponent(TabsComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tabs', 5 | templateUrl: './tabs.component.html', 6 | styleUrls: ['./tabs.component.css'] 7 | }) 8 | export class TabsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/tooltip/tooltip.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/tailwind-angular-starter/d45b00cd302ee2dd939cbe961b36f0fa588d06e9/src/app/tooltip/tooltip.component.css -------------------------------------------------------------------------------- /src/app/tooltip/tooltip.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 | 18 |
19 |
20 | -------------------------------------------------------------------------------- /src/app/tooltip/tooltip.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TooltipComponent } from './tooltip.component'; 4 | 5 | describe('TooltipComponent', () => { 6 | let component: TooltipComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [TooltipComponent] 12 | }); 13 | fixture = TestBed.createComponent(TooltipComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/tooltip/tooltip.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-tooltip', 5 | templateUrl: './tooltip.component.html', 6 | styleUrls: ['./tooltip.component.css'] 7 | }) 8 | export class TooltipComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FlowbiteApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.server.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { AppComponent } from './app/app.component'; 3 | import { config } from './app/app.config.server'; 4 | 5 | const bootstrap = () => bootstrapApplication(AppComponent, config); 6 | 7 | export default bootstrap; 8 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /src/server.ts: -------------------------------------------------------------------------------- 1 | import { 2 | AngularNodeAppEngine, 3 | createNodeRequestHandler, 4 | isMainModule, 5 | writeResponseToNodeResponse, 6 | } from '@angular/ssr/node'; 7 | import express from 'express'; 8 | import { dirname, resolve } from 'node:path'; 9 | import { fileURLToPath } from 'node:url'; 10 | 11 | const serverDistFolder = dirname(fileURLToPath(import.meta.url)); 12 | const browserDistFolder = resolve(serverDistFolder, '../browser'); 13 | 14 | const app = express(); 15 | const angularApp = new AngularNodeAppEngine(); 16 | 17 | /** 18 | * Example Express Rest API endpoints can be defined here. 19 | * Uncomment and define endpoints as necessary. 20 | * 21 | * Example: 22 | * ```ts 23 | * app.get('/api/**', (req, res) => { 24 | * // Handle API request 25 | * }); 26 | * ``` 27 | */ 28 | 29 | /** 30 | * Serve static files from /browser 31 | */ 32 | app.use( 33 | express.static(browserDistFolder, { 34 | maxAge: '1y', 35 | index: false, 36 | redirect: false, 37 | }), 38 | ); 39 | 40 | /** 41 | * Handle all other requests by rendering the Angular application. 42 | */ 43 | app.use('/**', (req, res, next) => { 44 | angularApp 45 | .handle(req) 46 | .then((response) => 47 | response ? writeResponseToNodeResponse(response, res) : next(), 48 | ) 49 | .catch(next); 50 | }); 51 | 52 | /** 53 | * Start the server if this module is the main entry point. 54 | * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. 55 | */ 56 | if (isMainModule(import.meta.url)) { 57 | const port = process.env['PORT'] || 4000; 58 | app.listen(port, () => { 59 | console.log(`Node Express server listening on http://localhost:${port}`); 60 | }); 61 | } 62 | 63 | /** 64 | * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions. 65 | */ 66 | export const reqHandler = createNodeRequestHandler(app); 67 | -------------------------------------------------------------------------------- /src/services/flowbite.service.ts: -------------------------------------------------------------------------------- 1 | // src/app/services/flowbite.service.ts 2 | import { Injectable, Inject, PLATFORM_ID } from '@angular/core'; 3 | import { isPlatformBrowser } from '@angular/common'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class FlowbiteService { 9 | constructor(@Inject(PLATFORM_ID) private platformId: any) {} 10 | 11 | loadFlowbite(callback: (flowbite: any) => void) { 12 | if (isPlatformBrowser(this.platformId)) { 13 | import('flowbite').then(flowbite => { 14 | callback(flowbite); 15 | }); 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | @import "flowbite/src/themes/default"; 3 | @plugin "flowbite/plugin"; 4 | @source "../node_modules/flowbite"; 5 | @source "../node_modules/flowbite-datepicker"; 6 | @custom-variant dark (&:where(.dark, .dark *)); -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [ 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "src/main.ts", 13 | "src/main.server.ts", 14 | "src/server.ts" 15 | ], 16 | "include": [ 17 | "src/**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "bundler", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022" 20 | }, 21 | "angularCompilerOptions": { 22 | "enableI18nLegacyMessageIdFormat": false, 23 | "strictInjectionParameters": true, 24 | "strictInputAccessModifiers": true, 25 | "strictTemplates": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | --------------------------------------------------------------------------------