ng new ng-project-name --standalone --style=scss --inline-style --inline-template --skip-git --no-ssr
ng add @ng-bootstrap/ng-bootstrap
ng g c component-name
Example output home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
standalone: true,
imports: [],
template: `
<p>
home works!
</p>
`,
styles: ``
})
export class HomeComponent {
}
Example route app.routes.ts:
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
{
path: '',
component: HomeComponent,
title: 'Home Page'
}
];
Example output home.component.ts:
import { Component } from '@angular/core';
import { HomeListingSelectorComponent } from '../home-listing-selector/home-listing-selector.component';
@Component({
selector: 'app-home',
standalone: true,
imports: [HomeListingSelectorComponent],
template: `
<p>
home works!
</p>
<app-home-listing-selector></app-home-listing-selector>
`,
styles: ``
})
export class HomeComponent {
}
- ng-bootstrap as design system
- Top app bar with navigation to 3 routes
- '/' -> Home
- '/router' -> Router
- '/forms' -> Forms
https://angular.io/guide/inputs-outputs
https://armenvardanyan.dev/