Shared Module Share component and Material Modules efficiently throughout the app This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. *Enrollment provides full access to this course (and updates) for life. Or Signup for Unlimited PRO Access đŧ Login to Watch đ Schematics App Navigation Shell đ Create a shared module to avoid duplicate imports and exports of common Angular Material features. The SharedModule exports all declarations and modules so they can be consumed in other feature modules. Steps Step 1 - Create a Module command line ng g module shared Add it to the app module. It will be imported by all features in this app. file_type_ng_component_ts app.module.ts import { SharedModule } from './shared/shared.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, SharedModule // <-- here ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Step 2 - Consolidate Imports Avoid duplication by consolidating your imports with the the spread syntax. We will be using the common material modules throughout the course. All Material modules listed below will be used in this app. file_type_ng_component_ts shared.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatButtonModule } from '@angular/material/button'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatIconModule } from '@angular/material/icon'; import { LayoutModule } from '@angular/cdk/layout'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatListModule } from '@angular/material/list'; import { MatMenuModule } from '@angular/material/menu'; import { RouterModule } from '@angular/router'; import { MatCardModule } from '@angular/material/card'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { ShellComponent } from './shell/shell.component'; const components = [ShellComponent]; const modules = [ CommonModule, MatButtonModule, MatToolbarModule, MatIconModule, LayoutModule, MatSidenavModule, MatListModule, MatMenuModule, MatIconModule, MatCardModule, MatFormFieldModule, MatInputModule, MatSnackBarModule, RouterModule ]; @NgModule({ declarations: [...components], imports: [...modules], exports: [ ...components, ...modules, ] }) export class SharedModule {} Step 3 - Add a Component command line ng g component shared/shell --export 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