Modern Apps 

No content

- Winston Churchill 

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

Fabian Gosebrink https://offering.solutions Google Developer Expert Microsoft MVP Pluralsight Author 

No content

No content

main.ts app.module.ts app.component.ts 

main.ts app.module.ts app.component.ts 

platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); 1 2 3 

import { NgModule } from '@angular/...'; import { BrowserModule } from '@angular/...'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} 1 2 3 4 5 6 7 8 9 10 11 

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `{{ title }}`, styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'oldangularapp'; } 1 2 3 4 5 6 7 8 9 10 

import { bootstrapApplication } from '@angular/platform-browser'; import { ImageGridComponent } from'./image-grid'; @Component({ standalone: true, selector: 'photo-gallery', imports: [ImageGridComponent], template: ` `, }) export class PhotoGalleryComponent { // component logic } bootstrapApplication(PhotoGalleryComponent); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 

import { bootstrapApplication } from '@angular/platform-browser'; import { ImageGridComponent } from'./image-grid'; @Component({ standalone: true, selector: 'photo-gallery', imports: [ImageGridComponent], template: ` `, }) export class PhotoGalleryComponent { // component logic } bootstrapApplication(PhotoGalleryComponent); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 standalone: true, import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 5 selector: 'photo-gallery', 6 imports: [ImageGridComponent], 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 bootstrapApplication(PhotoGalleryComponent); 16 

import { bootstrapApplication } from '@angular/platform-browser'; import { ImageGridComponent } from'./image-grid'; @Component({ standalone: true, selector: 'photo-gallery', imports: [ImageGridComponent], template: ` `, }) export class PhotoGalleryComponent { // component logic } bootstrapApplication(PhotoGalleryComponent); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 standalone: true, import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 5 selector: 'photo-gallery', 6 imports: [ImageGridComponent], 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 bootstrapApplication(PhotoGalleryComponent); 16 imports: [ImageGridComponent], import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 standalone: true, 5 selector: 'photo-gallery', 6 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 bootstrapApplication(PhotoGalleryComponent); 16 

import { bootstrapApplication } from '@angular/platform-browser'; import { ImageGridComponent } from'./image-grid'; @Component({ standalone: true, selector: 'photo-gallery', imports: [ImageGridComponent], template: ` `, }) export class PhotoGalleryComponent { // component logic } bootstrapApplication(PhotoGalleryComponent); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 standalone: true, import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 5 selector: 'photo-gallery', 6 imports: [ImageGridComponent], 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 bootstrapApplication(PhotoGalleryComponent); 16 imports: [ImageGridComponent], import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 standalone: true, 5 selector: 'photo-gallery', 6 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 bootstrapApplication(PhotoGalleryComponent); 16 export class PhotoGalleryComponent { // component logic } import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 standalone: true, 5 selector: 'photo-gallery', 6 imports: [ImageGridComponent], 7 template: ` 8 9 `, 10 }) 11 12 13 14 15 bootstrapApplication(PhotoGalleryComponent); 16 

import { bootstrapApplication } from '@angular/platform-browser'; import { ImageGridComponent } from'./image-grid'; @Component({ standalone: true, selector: 'photo-gallery', imports: [ImageGridComponent], template: ` `, }) export class PhotoGalleryComponent { // component logic } bootstrapApplication(PhotoGalleryComponent); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 standalone: true, import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 5 selector: 'photo-gallery', 6 imports: [ImageGridComponent], 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 bootstrapApplication(PhotoGalleryComponent); 16 imports: [ImageGridComponent], import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 standalone: true, 5 selector: 'photo-gallery', 6 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 bootstrapApplication(PhotoGalleryComponent); 16 export class PhotoGalleryComponent { // component logic } import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 standalone: true, 5 selector: 'photo-gallery', 6 imports: [ImageGridComponent], 7 template: ` 8 9 `, 10 }) 11 12 13 14 15 bootstrapApplication(PhotoGalleryComponent); 16 bootstrapApplication(PhotoGalleryComponent); import { bootstrapApplication } from '@angular/platform-browser'; 1 import { ImageGridComponent } from'./image-grid'; 2 3 @Component({ 4 standalone: true, 5 selector: 'photo-gallery', 6 imports: [ImageGridComponent], 7 template: ` 8 9 `, 10 }) 11 export class PhotoGalleryComponent { 12 // component logic 13 } 14 15 16 

No content

No content

No content

No content

No content

No content

No content

No content

ng generate @angular/core:standalone 

Convert all components, directives, and pipes to standalone Remove unnecessary NgModule classes Bootstrap the application using standalone APIs 

No content

export const appConfig: ApplicationConfig = { providers: [ // ... importProvidersFrom( ToastrModule.forRoot({ /* ... */ }), BrowserAnimationsModule ), ], }; 1 2 3 4 5 6 7 8 9 

export const appConfig: ApplicationConfig = { providers: [ // ... importProvidersFrom( ToastrModule.forRoot({ /* ... */ }), BrowserAnimationsModule ), ], }; 1 2 3 4 5 6 7 8 9 importProvidersFrom( ToastrModule.forRoot({ /* ... */ }), BrowserAnimationsModule ), export const appConfig: ApplicationConfig = { 1 providers: [ 2 // ... 3 4 5 6 7 ], 8 }; 9 

export const appConfig: ApplicationConfig = { providers: [ // ... provideRouter(APP_ROUTES), provideHttpClient( withInterceptors([...]), ), importProvidersFrom( ToastrModule.forRoot({ /* ... */ }), BrowserAnimationsModule ), ], }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 

export const appConfig: ApplicationConfig = { providers: [ // ... provideRouter(APP_ROUTES), provideHttpClient( withInterceptors([...]), ), importProvidersFrom( ToastrModule.forRoot({ /* ... */ }), BrowserAnimationsModule ), ], }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 provideRouter(APP_ROUTES), provideHttpClient( withInterceptors([...]), ), export const appConfig: ApplicationConfig = { 1 providers: [ 2 // ... 3 4 5 6 7 8 importProvidersFrom( 9 ToastrModule.forRoot({ /* ... */ }), 10 BrowserAnimationsModule 11 ), 12 ], 13 }; 14 

provideRouter(APP_ROUTES), provideHttpClient( withInterceptors([...]), withFetch() ), export const appConfig: ApplicationConfig = { 1 providers: [ 2 // ... 3 4 5 6 7 8 importProvidersFrom( 9 ToastrModule.forRoot({ /* ... */ }), 10 BrowserAnimationsModule 11 ), 12 ], 13 }; 14 

provideAuth({ /* ... */ }), export const appConfig: ApplicationConfig = { 1 providers: [ 2 // ... 3 provideRouter(APP_ROUTES), 4 provideHttpClient( 5 withInterceptors([...]), 6 withFetch() 7 ), 8 9 importProvidersFrom( 10 ToastrModule.forRoot({ /* ... */ }), 11 BrowserAnimationsModule 12 ), 13 ], 14 }; 15 

No content

No content

@Injectable() export class MyInterceptor implements HttpInterceptor { constructor(private authService: AuthService){} intercept(request: HttpRequest>, next: HttpHandler): Observable { const accessToken = this.authService.getToken(); const clonedRequest = req.clone({ headers: req.headers.set('Authorization', `Bearer ${accessToken}`), }); return next.handle(clonedRequest); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

export function myInterceptor(req: HttpRequest, next: HttpHandlerFn) { const loadingService = inject(AuthService); const accessToken = this.authService.getToken(); const clonedRequest = req.clone({ headers: req.headers.set('Authorization', `Bearer ${accessToken}`), }); return next(clonedRequest); } 1 2 3 4 5 6 7 8 9 10 

providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, ], 1 2 3 

providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, ], 1 2 3 providers: [ provideHttpClient(withInterceptors([authInterceptor()])), ], 1 2 3 

@Injectable({ providedIn: 'root' }) export class AuthorizationGuard implements CanActivate { constructor( private oidcSecurityService: OidcSecurityService, private router: Router ) {} canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable { return this.oidcSecurityService.isAuthenticated$.pipe( map(({ isAuthenticated }) => { // allow navigation if authenticated if (isAuthenticated) { return true; } // redirect if not authenticated return this.router.parseUrl(''); }) ); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 

export const authenticatedGuard = () => { const router = inject(Router); const securityService = inject(OidcSecurityService); return securityService.isAuthenticated$.pipe( map(({ isAuthenticated }) => { // allow navigation if authenticated if (isAuthenticated) { return true; } // redirect if not authenticated return router.parseUrl(''); }) ); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 

export const DOGGOS_ROUTES: Routes = [ { path: 'my', component: MyDoggosComponent, canActivate: [isAuthenticated], }, { path: 'my/add', component: AddDoggoComponent, canActivate: [isAuthenticated], }, ]; 1 2 3 4 5 6 7 8 9 10 11 12 

export const DOGGOS_ROUTES: Routes = [ { path: 'my', component: MyDoggosComponent, canActivate: [isAuthenticated], }, { path: 'my/add', component: AddDoggoComponent, canActivate: [isAuthenticated], }, ]; 1 2 3 4 5 6 7 8 9 10 11 12 canActivate: [isAuthenticated], canActivate: [isAuthenticated], export const DOGGOS_ROUTES: Routes = [ 1 { 2 path: 'my', 3 component: MyDoggosComponent, 4 5 }, 6 { 7 path: 'my/add', 8 component: AddDoggoComponent, 9 10 }, 11 ]; 12 

No content

No content

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 firstName = signal('Jane'); lastName = signal('Doe'); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 firstName = signal('Jane'); lastName = signal('Doe'); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 firstName = signal('Jane'); lastName = signal('Doe'); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 {{ fullName() }} fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 firstName = signal('Jane'); lastName = signal('Doe'); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 {{ fullName() }} fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 effect(() => console.log('Name changed:', this.fullName())); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 firstName = signal('Jane'); lastName = signal('Doe'); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 {{ fullName() }} fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 effect(() => console.log('Name changed:', this.fullName())); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 this.firstName.set(newName); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 19 } 20 } 21 

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 firstName = signal('Jane'); lastName = signal('Doe'); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 {{ fullName() }} fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 effect(() => console.log('Name changed:', this.fullName())); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 this.firstName.set(newName); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 19 } 20 } 21 firstName = signal('Jane'); this.firstName.set(newName); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 19 } 20 } 21 

@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} Click `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 firstName = signal('Jane'); lastName = signal('Doe'); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 {{ fullName() }} fullName = computed(() => `${this.firstName()} ${this.lastName()}`); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 effect(() => console.log('Name changed:', this.fullName())); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 this.firstName.set(newName); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 19 } 20 } 21 firstName = signal('Jane'); this.firstName.set(newName); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 effect(() => console.log('Name changed:', this.fullName())); 15 } 16 17 setName(newName: string) { 18 19 } 20 } 21 effect(() => console.log('Name changed:', this.fullName())); @Component({ 1 selector: 'my-app', 2 standalone: true, 3 template: ` 4 {{ fullName() }} 5 Click 6 `, 7 }) 8 export class App { 9 firstName = signal('Jane'); 10 lastName = signal('Doe'); 11 fullName = computed(() => `${this.firstName()} ${this.lastName()}`); 12 13 constructor() { 14 15 } 16 17 setName(newName: string) { 18 this.firstName.set(newName); 19 } 20 } 21 

import { toObservable } from '@angular/core/rxjs-interop'; @Component({...}) export class App { count = signal(0); count$ = toObservable(this.count); ngOnInit() { this.count$.subscribe(() => ...); } } 1 2 3 4 5 6 7 8 9 10 11 

import { toSignal } from '@angular/core/rxjs-interop'; @Component({ template: `

{{ row }}

` }) export class App { dataService = inject(DataService); data = toSignal(this.dataService.data$, []); } 1 2 3 4 5 6 7 8 9 10 11 12 

No content

No content

Jest in Angular CLI { "projects": { "my-app": { "architect": { "test": { "builder": "@angular-devkit/build-angular:jest", "options": { "tsConfig": "tsconfig.spec.json", "polyfills": ["zone.js", "zone.js/testing"] } } } } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

Autocomplete imports in templates 

Required Inputs @Component(...) export class App { @Input({ required: true }) title: string = ''; } 1 2 3 4 

Injectable Destroy import { Injectable, DestroyRef } from '@angular/core'; @Injectable(...) export class AppService { destroyRef = inject(DestroyRef); destroy() { this.destroyRef.onDestroy(() => /* cleanup */ ); } } 1 2 3 4 5 6 7 8 9 10 

Self Closing Tags 1 

New Template Syntax trackByFunction(index, item) { return item.id; } 1 2 3 4 5 6 7 

New Template Syntax trackByFunction(index, item) { return item.id; } 1 2 3 4 5 6 7 {#for item of items; track item.id; let idx = $index, e = $even} Item #{{ idx }}: {{ item.name }} {/for} 1 2 3 

New Template Syntax {#for item of items; track item.id} {{ item }} {:empty} There were no items in the list. {/for} 1 2 3 4 5 

New Template Syntax Main case was true! Extra case was true! False case! 1 2 3 4 5 6 7 8 9 10 11 12 13 

New Template Syntax {#if cond.expr} Main case was true! {:else if other.expr} Extra case was true! {:else} False case! {/if} 1 2 3 4 5 6 7 

No content

No content

No content

@Component({ selector: 'app-my-doggos', standalone: true, templateUrl: './my-doggos.component.html', styleUrls: ['./my-doggos.component.css'], imports: [AsyncPipe, RouterLink, DatePipe, DecimalPipe, NgFor], }) export class MyDoggosComponent implements OnInit { private readonly store = inject(Store); doggos = this.store.select(getMyDoggos); ngOnInit(): void { this.store.dispatch(DoggosActions.loadMyDoggos()); } deleteDoggo(doggo: Doggo) { this.store.dispatch(DoggosActions.deleteDoggo({ doggo })); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 

Component Store State Reducer Effects Actions 

No content

No content

No content

No content

No content

No content

No content

Share code between apps 

Share code between apps Provide feature to one app 

Share code between apps Provide feature to one app Multiple Libs = 1 Feature 

Feature Ui Feature Domain Utils Util- Environments Util-Auth UI-Common Util-Common About Doggos App Shared 

type:app, scope:doggo-rating-app 

type:feature scope:about type:app, scope:doggo-rating-app 

type:feature type:ui type:feature type:domain type:utils scope:about scope:doggos type:app, scope:doggo-rating-app 

type:feature type:ui type:feature type:domain type:utils scope:about scope:doggos type:app, scope:doggo-rating-app scope:shared type:util type:util type:ui type:util 

No content

{ "name": "about-feature", "$schema": "../node_modules/nx/schemas/project-schema.json", "projectType": "library", "sourceRoot": "libs/about/feature/src", "prefix": "ps-doggo-rating", "targets": { // ... }, "tags": ["type:feature", "scope:about"] } 1 2 3 4 5 6 7 8 9 10 11 

{ "name": "about-feature", "$schema": "../node_modules/nx/schemas/project-schema.json", "projectType": "library", "sourceRoot": "libs/about/feature/src", "prefix": "ps-doggo-rating", "targets": { // ... }, "tags": ["type:feature", "scope:about"] } 1 2 3 4 5 6 7 8 9 10 11 "tags": ["type:feature", "scope:about"] { 1 "name": "about-feature", 2 "$schema": "../node_modules/nx/schemas/project-schema.json", 3 "projectType": "library", 4 "sourceRoot": "libs/about/feature/src", 5 "prefix": "ps-doggo-rating", 6 "targets": { 7 // ... 8 }, 9 10 } 11 

"@nx/enforce-module-boundaries": [ "error", { "enforceBuildableLibDependency": true, "allow": [], "depConstraints": [ { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, { "sourceTag": "scope:doggos", "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

"@nx/enforce-module-boundaries": [ "error", { "enforceBuildableLibDependency": true, "allow": [], "depConstraints": [ { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, { "sourceTag": "scope:doggos", "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 

"@nx/enforce-module-boundaries": [ "error", { "enforceBuildableLibDependency": true, "allow": [], "depConstraints": [ { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, { "sourceTag": "scope:doggos", "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 "depConstraints": [ "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 

"@nx/enforce-module-boundaries": [ "error", { "enforceBuildableLibDependency": true, "allow": [], "depConstraints": [ { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, { "sourceTag": "scope:doggos", "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 "depConstraints": [ "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 7 8 9 10 11 12 13 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos", "scope:shared"] 21 

"@nx/enforce-module-boundaries": [ "error", { "enforceBuildableLibDependency": true, "allow": [], "depConstraints": [ { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, { "sourceTag": "scope:doggos", "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 "depConstraints": [ "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 7 8 9 10 11 12 13 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, [], "depConstraints": [ 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 15 16 17 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos", "scope:shared"] 21 }, 22 { 23 "sourceTag": "scope:shared", 24 "onlyDependOnLibsWithTags": ["scope:shared"] 25 }, 26 { 27 

"@nx/enforce-module-boundaries": [ "error", { "enforceBuildableLibDependency": true, "allow": [], "depConstraints": [ { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, { "sourceTag": "scope:doggos", "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 "depConstraints": [ "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 { "sourceTag": "scope:doggo-rating-app", "onlyDependOnLibsWithTags": [ "scope:doggos", "scope:about", "scope:shared" ] }, "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 7 8 9 10 11 12 13 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 { "sourceTag": "scope:about", "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] }, "@nx/enforce-module-boundaries": [ 1 "error", 2 { 3 "enforceBuildableLibDependency": true, 4 "allow": [], 5 "depConstraints": [ 6 { 7 "sourceTag": "scope:doggo-rating-app", 8 "onlyDependOnLibsWithTags": [ 9 "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 15 16 17 18 { 19 "sourceTag": "scope:doggos", 20 "onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"] 21 { "sourceTag": "scope:doggos", "onlyDependOnLibsWithTags": ["scope:doggos", "scope:shared"] }, y p g [ "scope:doggos", 10 "scope:about", 11 "scope:shared" 12 ] 13 }, 14 { 15 "sourceTag": "scope:about", 16 "onlyDependOnLibsWithTags": ["scope:about", "scope:shared"] 17 }, 18 19 20 21 22 { 23 "sourceTag": "scope:shared", 24 "onlyDependOnLibsWithTags": ["scope:shared"] 25 }, 26 { 27 "sourceTag": "type:app", 28 "onlyDependOnLibsWithTags": [ 29 "type:feature", 30 "type:util", 31 

No content

https://go.nx.dev/angular-enterprise-monorepo-patterns-new-book 

No content

@Component({ selector: 'app-my-doggos', standalone: true, templateUrl: './my-doggos.component.html', styleUrls: ['./my-doggos.component.css'], imports: [AsyncPipe, RouterLink, DatePipe, DecimalPipe, NgFor], }) export class MyDoggosComponent implements OnInit { private readonly store = inject(Store); doggos = this.store.select(getMyDoggos); ngOnInit(): void { this.store.dispatch(DoggosActions.loadMyDoggos()); } deleteDoggo(doggo: Doggo) { this.store.dispatch(DoggosActions.deleteDoggo({ doggo })); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 

@Component({ selector: 'app-my-doggos', standalone: true, templateUrl: './my-doggos.component.html', styleUrls: ['./my-doggos.component.css'], imports: [AsyncPipe, RouterLink, DatePipe, DecimalPipe, NgFor], }) export class MyDoggosComponent implements OnInit { private readonly store = inject(Store); doggos = this.store.select(getMyDoggos); ngOnInit(): void { this.store.dispatch(DoggosActions.loadMyDoggos()); } deleteDoggo(doggo: Doggo) { this.store.dispatch(DoggosActions.deleteDoggo({ doggo })); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 doggos = this.store.select(getMyDoggos); @Component({ 1 selector: 'app-my-doggos', 2 standalone: true, 3 templateUrl: './my-doggos.component.html', 4 styleUrls: ['./my-doggos.component.css'], 5 imports: [AsyncPipe, RouterLink, DatePipe, DecimalPipe, NgFor], 6 }) 7 export class MyDoggosComponent implements OnInit { 8 private readonly store = inject(Store); 9 10 11 12 ngOnInit(): void { 13 this.store.dispatch(DoggosActions.loadMyDoggos()); 14 } 15 16 deleteDoggo(doggo: Doggo) { 17 this.store.dispatch(DoggosActions.deleteDoggo({ doggo })); 18 } 19 } 20 

doggos = this.store.selectSignal(getMyDoggos); @Component({ 1 selector: 'app-my-doggos', 2 standalone: true, 3 templateUrl: './my-doggos.component.html', 4 styleUrls: ['./my-doggos.component.css'], 5 imports: [AsyncPipe, RouterLink, DatePipe, DecimalPipe, NgFor], 6 }) 7 export class MyDoggosComponent implements OnInit { 8 private readonly store = inject(Store); 9 10 11 12 ngOnInit(): void { 13 this.store.dispatch(DoggosActions.loadMyDoggos()); 14 } 15 16 deleteDoggo(doggo: Doggo) { 17 this.store.dispatch(DoggosActions.deleteDoggo({ doggo })); 18 } 19 } 20 

No content

No content

No content

No content

No content

No content