Mark (Techson) Thompson
Google
Course Description
Discover the power of Angular’s latest features straight from the Angular team at Google! Learn to use the new control flow syntax in your component templates and performance features like signals and deferrable views. Create components dynamically, use state management with routing, and wire up reactive forms for data handling. Equip yourself with modern Angular foundations and see what the Angular Renaissance is all about!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 9 minutes
Mark Techson introduces themself and gives an overview of what will be covered in the course. They explain that the focus will be on the fundamentals of Angular and building an application. The topics that will be covered include components, routing, forms, dependency injection, and optimizations. The instructor also emphasizes the importance of scalability and confidence in using Angular.
Angular Essentials
Section Duration: 55 minutes
Mark guides students through the process of accessing the Angular playground on angular.dev and changing the code to display "Hello Universe" instead of "Hello World". The instructor also provides instructions for setting up the project on the students' local machines and installing the necessary dependencies. The lesson concludes with a confirmation step where students are asked to check if they can access the application on localhost 4200.
Mark provides an overview of an Angular project structure. They explain the purpose of various files and folders, such as angular.json, package.json, and main.ts. They also discuss the use of TypeScript in Angular and highlight the simplicity of the project structure to reduce the learning curve for beginners.
Mark explains the three main parts that are needed to work with Angular: TypeScript, HTML, and CSS and discuss decorators and how they are used to add behavior to classes in Angular. The instructor demonstrates how to create a component in Angular and provides an example of creating an ordered list with favorite songs, movies, and books. They also show how to apply styles to the ordered list using CSS. Finally, the instructor demonstrates how to run the Angular project and view the changes in the browser.
Mark teaches about displaying dynamic values in components using string interpolation in Angular. They explain how to define class properties in the component class and link them to the template using double curly braces. They also address some common issues and provide examples for better understanding.
Mark explains the concept of component composition in Angular. They use the analogy of building with blocks to illustrate how components can be combined to create a full application. The instructor demonstrates how to import and reference a component in another component's template, and guides the students through creating a new component and updating the existing component to use it. They also address questions from the students about CSS selectors and component naming conventions.
Templating
Section Duration: 1 hour, 21 minutes
Mark introduces the concept of control flow in Angular templates using the `*ngIf` syntax. They explain how to conditionally display elements or components based on a true or false expression. They also demonstrate how to use the `else` and `else if` statements to handle different conditions. The instructor then guides the students through an exercise where they need to fill in missing information in a credit card component and conditionally display the membership level based on the data. They also show an alternative approach using the `switch` statement for conditional rendering.
Mark demonstrates how to use a loop in Angular to render a list of items in a template. They explain the syntax of the loop and the benefits of using it, including improved rendering performance. They also show how to access and display properties of each item in the loop. Additionally, they discuss the use of the "track by" syntax to optimize rendering and handle dynamic changes in the list.
Mark explains the concepts of property binding, event binding, inputs, and outputs in Angular components. They demonstrate how to dynamically set values for properties of elements in a template using property binding, and how to respond to events in the template using event binding. They also show how to pass data into a component using inputs and emit data out of a component using outputs.
Mark guides the students through an example of using inputs and outputs in Angular components. They start by moving the template structure of a component to its own file and then add an input decorator to communicate with the component. They also demonstrate how to pass data into the component using property binding and fill in the component's details.
Mark guides the students through adding a button to the component and setting up an output event. The goal is to save a car and have it appear in a list. The instructor explains the process of importing the necessary classes, creating an event emitter, and defining the output event. They also demonstrate how to handle the button click event and emit the car object using the output event.
Mark explains how to bind to an output event in Angular, demonstrates how to use the output event in the app component, and how to handle the emitted event in the child component. They also discuss the importance of using types in Angular to ensure that the emitted event and its data are correctly handled.
Navigation
Section Duration: 38 minutes
Mark explains that Angular has a built-in complete router and demonstrates how to set up routes in the app-routes.ts file. They also explain the use of the router outlet component and show how to enable routing in the app.config.ts file. The instructor then guides the students through the process of enabling routing and using the router module in the app.component.ts file.
Mark discusses the concept of router outlet in Angular and demonstrates how it works by using visual examples. They explain that the router outlet is the space in a component where the routed component will be displayed. The instructor also explains how to create clickable links using the router link directive and how to pass dynamic values to a route using placeholders and input binding.
Mark goes through a routing recap, combining multiple elements together. They set up links, enable routing, and ensure the router outlet is in place. They also demonstrate how to dynamically generate a list of links using the ngFor directive and the router link attribute. Finally, they show how to use a setter to retrieve the ID parameter from the URL and display the corresponding details.
Forms
Section Duration: 48 minutes
Mark discusses the two systems for gathering input from users in Angular: template-driven forms and reactive forms. They explain that template-driven forms are quick and easy to use, but require more configuration for unit testing. On the other hand, reactive forms are more flexible and reusable, with a better unit testing experience. The instructor provides an example of how to create a template-driven form and explains the concept of "Banana in a Box" for two-way data binding.
Mark guides the students through creating a template-driven form in Angular. They demonstrate how to add input fields and a text area to the form, create model data for the form, bind the form controls to the model data using ngModel, and import the necessary Forms module. They also show how the form updates in real-time as the user types and explain the concept of two-way binding.
Mark demonstrates how to use reactive forms in Angular. They start by enabling reactive forms by importing the reactive forms module. Then, they define the form controls model using form group and form control. Next, they bind the form group to the template and update the input fields to use form control name. Finally, they handle form submission and retrieve the form values using the form group's value property. The instructor also discusses the differences between template-driven forms and reactive forms.
Mark explains the concept of dependency injection in Angular and how Angular has implemented it on the frontend. The instructor demonstrates how to make a service injectable using the `@Injectable` decorator and how to provide the service at the root level using the `providedIn` property. They also show how to inject the service into a component using the `inject` function and how to use the injected service to fetch data and display it in the component's template. The instructor also mentions that if you don't want to provide the service at the root level, you can provide it at the component level instead.
Signals and Views
Section Duration: 21 minutes
Mark explains that signals are a new way of handling change detection and reactivity in Angular applications. The lesson covers the three reactive primitives: signals, computed, and effects, and provides examples of how they can be used in an application. The instructor emphasizes the benefits of using signals, such as improved performance and the ability to share services with dependency injection.
Mark Techson explains that deferrable views allow for lazy loading of components and templates, which can help reduce the initial bundle size and improve performance. The instructor demonstrates how to use the defer syntax in the template to defer the loading of a component until a specific interaction occurs, such as clicking a button. They also show different triggers that can be used, such as idle state, scroll events, or custom conditions.
Wrapping Up
Section Duration: 19 minutes
Mark wraps up the course by briefly discussing the Angular CLI and its capabilities and the Angular Material design system and the Component Development Kit (CDK), which provides unstyled accessible components that can be easily customized. The instructor encourages learners to explore more resources on Angular.dev, including self-paced exercises and a recorded course on YouTube. The lesson concludes with a Q&A session, where the instructor answers questions about input transforms, pipes, and compares Angular to other frameworks like Nuxt and Next.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops