👉🏼 How to get started quickly?
Clone the starter repository, by running the following command:
Then just simply go to the project directory, install packages and run the server:
Feel free to configure any options in the app.component.ts file
The source code for the starter repository can be found here.
👉🏼 How to create a new project?
1. Install the Nighthawk Devkit by running the following command:
2. Import Nighthawk Devkit default styles file in your styles.scss file, like so:
3. Run a script that copies Nighthawk core assets into your public folder after, like so:
4. Wrap your <router-outlet /> (in app.component.ts) with a <main> tag, so it works with the page loader, like so:
5. Set the ViewContainerRef and bootstrap the Nighthawk application after view initialization, like so:
6. All done, you can now configure the page loader and style variables in your theme.scss file.
🫵🏼 Application configuration
Option | Type | Description | Default value | Possible values |
---|---|---|---|---|
timezone | string | Timezone to be used for date formatting | true/false | |
databaseTimezone | string | Database timezone to be used for date formatting | true/false | |
pageLoaderEnabled | boolean | Shows the loader on initial page load | true | true/false |
routeLoaderEnabled | boolean | Shows the loader when switching routes | false | true/false |
pageLoaderType | enum | Specifies which type of loader to use for page/route loading (fallback) | - | 'bouncing-ball', 'bouncing-circles', 'bouncing-squares', 'fade-stagger-circles', 'fade-stagger-squares', 'gear-spinner', 'infinite-spinner', 'motion-blur-2', 'ripples', 'tube-spinner', 'tube-spinner' |
pageLoaderSize | number | Page loader size in pixels | 16 | any number |
pageLoaderCustomImagePath | boolean | string | Custom loader image path, overrides pageLoaderType | - | any string |
manualLoader | boolean | Show loader until NighthawkBootstrapService::pageLoaded() is called | false | true/false |
minimumLoaderTime | number | Minimum time that the initial page loader should be visible for in milliseconds | 1000 | 500-infinite |
fonts | string[] | List of fonts used on the page to check before loader can finish | [] | string[] |