SEO Service Create a service for Open Graph & Twitter meta tags. This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. SignUp for Unlimited PRO Access OR *Enrollment provides full access to this course (and updates) for life. đŧ Login to Watch đ Server-side Rendering - What? Why? How? Angular Universal with NestJS đ Create a customers module that uses dynamic routing and generates SEO metatags based on a Firestore document query. Steps Generate Resources command line ng g module customers --routing ng g c customers/detail-page ng g c customers/list-page ng g s services/seo Routing file_type_ng_component_ts customers-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ListPageComponent } from './list-page/list-page.component'; import { DetailPageComponent } from './detail-page/detail-page.component'; const routes: Routes = [ { path: '', component: ListPageComponent }, { path: ':id', component: DetailPageComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class CustomersRoutingModule { } SEO Service file_type_ng_component_ts seo.service.ts import { Injectable } from '@angular/core'; import { Title, Meta } from '@angular/platform-browser'; import { Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class SeoService { constructor(private title: Title, private meta: Meta, private router: Router) { } generateTags({ title = '', description = '', image = '' }) { this.title.setTitle(title); this.meta.addTags([ // Open Graph { name: 'og:url', content: `https://firestarter.fireship.io${this.router.url}` }, { name: 'og:title', content: title }, { name: 'og:description', content: description }, { name: 'og:image', content: image }, // Twitter Card { name: 'twitter:card', content: 'summary' }, { name: 'twitter:site', content: '@fireship_dev' }, ]); } } List Page file_type_ng_component_ts list-page.component.ts import { Component, OnInit } from '@angular/core'; import { SeoService } from 'src/app/services/seo.service'; import { AngularFirestore } from '@angular/fire/firestore'; @Component({ selector: 'app-list-page', templateUrl: './list-page.component.html', styleUrls: ['./list-page.component.scss'] }) export class ListPageComponent implements OnInit { customers; constructor(private seo: SeoService, private db: AngularFirestore) {} ngOnInit() { this.seo.generateTags({ title: 'Customer List', description: 'A list filled with customers' }); this.customers = this.db.collection('customers').valueChanges({ idField: 'id' }); } } file_type_html list-page.component.html <mat-list-item *ngFor="let cust of customers | async" [routerLink]="cust.id" role="listitem"> <h3>{{ cust.name }}</h3> </mat-list-item> Detail Page file_type_ng_component_ts detail-page.component.ts import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { AngularFirestore } from '@angular/fire/firestore'; import { tap } from 'rxjs/operators'; import { SeoService } from 'src/app/services/seo.service'; import { Observable } from 'rxjs'; @Component({ selector: 'app-detail-page', templateUrl: './detail-page.component.html', styleUrls: ['./detail-page.component.scss'] }) export class DetailPageComponent implements OnInit { customerId: string; customer: Observable<any>; constructor( private route: ActivatedRoute, private db: AngularFirestore, private seo: SeoService ) {} ngOnInit() { this.customerId = this.route.snapshot.paramMap.get('id'); this.customer = this.db .collection('customers') .doc<any>(this.customerId) .valueChanges() .pipe( tap(cust => this.seo.generateTags({ title: cust.name, description: cust.bio, image: cust.image, }) ) ); } } Chapters Optional Beginner Project đļ 1 Angular Tutorial for Beginners Build a Tic-Tac-Toe game with Angular free 20:23 Intro đ 2 Resources Source code and course resources free 1:51 ⥠3 CLI Introduction to the Angular CLI free 4:01 âŖī¸ 4 Anatomy The purpose of every file in Angular free 5:13 đĻ 5 Components An introduction to Components, Directives, and Pipes free 13:51 đ 6 Dependency Injection and Services What is dependency injection (DI) and why is it so useful? free 3:18 đ§Š 7 Modules How NgModules help manage code and complexity free 2:41 App đģ 8 App Overview Overview of the organization and architecture of the Firestarter demo app. 2:50 đ¨ 9 Meet Angular Material Introduction to Angular Material and design systems 5:21 đī¸ 10 Schematics Using Angular Material Schematics 1:10 đ¤ 11 Shared Module Share component and Material Modules efficiently throughout the app 3:59 đ 12 App Navigation Shell Add a responsive navigation shell to the app 8:45 đ 13 Routing Create a home page configured with the Angular Router. 2:56 đĨ 14 Firebase Setup Add Firebase and @angular/fire to your app 2:42 Users 𤸠15 Lazy Loaded Login Feature Configure the router for lazy-loaded user module, aka code splitting. 3:54 đ¤ 16 Google SignIn Create a directive that extends Google SignIn to any button or element 4:37 đ§ 17 Email Password Auth SignUp, SignIn, and reset a password with Reactive Forms 11:32 đŽ 18 Auth Guard Protect routes with guards. 4:59 Kanban đą 19 Kanban Module Kanban feature module setup 2:10 đĨ 20 Firestore Data Model Firestore database model for kanban boards and backend security rules. 4:48 đĨ 21 Database Service Create a specialized Firestore database service for Kanban boards 7:39 đą 22 CDK Drag and Drop Add drag and drop capabilities to a Material Card 6:36 đą 23 Drag and Drop Animation Animate the CDK Drag and Drop events with CSS transitions 3:06 đą 24 Dialogs Create, update, delete data from a Material Dialog modal popup 8:03 đī¸ 25 Delete Button Create a confirmable delete button 3:10 Server-side Rendering â 26 Server-side Rendering - What? Why? How? Key concepts related to SSR and Angular Universal 2:57 đˇī¸ 27 SEO Service Create a service for Open Graph & Twitter meta tags. 5:32 đĻ 28 Angular Universal with NestJS Add server-side rendering to Angular with Nest.js 2:56 đ 29 Prerendering Prerender with Angular Universal using a vanilla JS script 4:04 đŠī¸ 30 Angular Universal on Google Cloud Run Deploy to Angular Universal to Google Cloud Run and connect it to Firebase Hosting 5:55