Google SignIn Create a directive that extends Google SignIn to any button or element 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 đ Lazy Loaded Login Feature Email Password Auth đ Steps Step 1 - Generate the Google Signin Directive command line ng g directive user/google-signin The directive listens to the click event on the host element to trigger the signin process in Firebase. Event Types file_type_ng_component_ts google-signin.directive.ts import { Directive, HostListener } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import * as firebase from 'firebase/app'; @Directive({ selector: '[appGoogleSignin]' }) export class GoogleSigninDirective { constructor(private afAuth: AngularFireAuth) {} @HostListener('click') onclick() { this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); } } The directive can be attached to any button or clickable element. Step 2 - Attach the Directive to a Button Update the Login Page to use the directive on a material button and listen to the AngularFire user. file_type_ng_component_ts login-page.component.ts import { Component, OnInit } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; @Component({ selector: 'app-login-page', templateUrl: './login-page.component.html', styleUrls: ['./login-page.component.scss'] }) export class LoginPageComponent { constructor(public afAuth: AngularFireAuth) { } } file_type_html login-page.component.html <div *ngIf="!(afAuth.authState | async)"> <h1>Login</h1> <button mat-raised-button appGoogleSignin> <img src="/assets/google-logo.svg" /> Login with Google </button> </div> <div *ngIf="afAuth.authState | async as user" class="logout"> <p> Logged in as <strong>{{ user.email }}</strong> </p> <button mat-stroked-button (click)="afAuth.signOut()">Logout</button> </div> 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