Angular Developer Training - Advanced


Course Description

This course follows on from the introductory course on Angular and covers the more advanced but widely used features that Angular has to offer. It covers many advanced component techniques, creating custom attribute and structural directives, asynchronous programming using the rxjs library. It also covers creating a Progressive Web Application using Angular, using authentication and authorization routing features and automated testing. It covers creating a complex project using nx and deploying your app using a SSL certificate. This course will bring the skills of experienced Angular developers to the next level.

Duration: 5 days


Prerequisites

Participants should be familiar with the basic Angular concepts including angular cli, components, services, directives, pipes, data binding and dependency injection.

Advanced Component Topics

Child and Parent components Inter component communication Host Template Sub components of a tag Make a computed property available using a custom setter ngOnChanges @ViewChild / @ViewChildren, static / dynamic types, ngAfterViewInit Monitoring Children Access to parent @Host Styling parent - :host pseudo selector Modifying DOM properties of host @HostBinding Content projection Styling parent component - the :host pseudo selector Component Lifecycle Built-in and custom pipes

Advanced Directives

Customisation Custom Directive Custom Structural Directive

Forms & Reactive Forms

FormsControl and FormGroups ngModel and ngForm Form Validation FormBuilder Custom Validator Subscribing to a form

Asynchronous Programming

Asynchronous JavaScript Callbacks -> Promises -> Observables async / await Using HttpClient to make Ajax calls Reactive Programming RXJS Marble diagrams The Async Pipe

Advanced Styling

Advanced css techniques SASS Understanding the Shadow DOM Material design Themed components

Automated Testing

Jasmine test framework Karma test runner Writing unit tests Writing component tests Testing Best Practices

State Management

Meaning of State Simple state management More complex state management NgRx library NgRx concepts - store, effects

Advanced Routing

Route parameters Routes with multiple parameters Query parameters Dynamically created navigation Authentication & Authorization Role based routing with authentication Route Guards External Authentication provider JWT

Angular 16 New Features

Signals Stand-alone components Required Inputs Changes To Routing Vite Development Server Self-closing tags

Building And Deployment

Development and production environments Configuration settings Building Deploying Hosting with SSL

Angular Architecture

Modules - importing and exporting - grouping components and directives into reusable modules Architecting a complex project with nx Domain Driven Design Micro Frontends Strategic Design Server-side Rendering


Angular MEAN JavaScript Web Programming Modern Web Development Front End Web Development Fullstack Web Development TypeScript