Angular 7 : Practical Guide [11 Hours]

Explore how TypeScript transpiles to JavaScript and adds static-like features such as encapsulation and private fields to help organize large codebases.

Explore the basic syntax of TypeScript, including identifiers, variables, and types, with practical console log examples and how TypeScript transpiles to JavaScript.

This lesson introduces TypeScript types, covering basic types like number, boolean, string, void, and undefined, and explores arrays, tuples, and the any type along with null and undefined distinctions.

Master arithmetic, relational, logical, and assignment operators in angular, illustrated with simple console.log examples and quick demonstrations.

Learn to use if, else, and else if in TypeScript to implement conditional logic, compare values with relational operators, and branch outputs with console.log.

Master for, while, and do-while loops in angular, practice variable declaration and conditional repetition, and print number sequences using console logs.

Practice printing a countdown from a to zero in this Angular 7 practical guide exercise, filtering values divisible by 12 and listing all numbers when not divisible.

Explore the exercise solution for the Angular 7 course, demonstrating a modulus-based check for numbers divisible by 12, a for loop, and console logging, with tips for debugging and learning.

Learn how to define and call functions in TypeScript for Angular applications, including input parameters, return values, and simple console outputs; explore basic function structure and examples.

Master arrays in TypeScript for Angular 7: declare and initialize arrays, access elements, iterate with for each, and deconstruct arrays to unpack values.

Define tuples in TypeScript as fixed-type arrays with a blueprint like number, string, and boolean, and pass them into functions to enforce shape in Angular applications.

Create and use TypeScript classes in Angular, including constructors, fields, and methods. Explore access modifiers such as public, private, protected, and read only, and learn inheritance with extends.

Implement a furniture base with tv and couch subclasses; use a getDimensions method to return two-dimensional height and width for tv and three-dimensional height, width, and length for couch.

Demonstrate solving the exercise by implementing a base furniture class with dimension handling and two or three dimensional subclasses, using a protected constructor and inheritance in TypeScript.

Explore what front end frameworks are and how Angular fits into the landscape, comparing it with React and Vue to clarify the problems they solve for organizing larger applications.

Discover how node provides a javascript runtime for running code on the server, and how angular uses node to enable development server with hot reload and production builds.

Discover how the Angular CLI speeds up building Angular apps by generating projects, components, and dependencies with a single command and running the app.

Explore the angular files and folders generated by ng new, remove extra end-to-end testing folders, and understand key src and root configuration files like environments, polyfills, main.ts, angular.json, and tsconfig.

Master core Angular concepts by exploring modules, components, and their files, while learning how view encapsulation isolates styles and how Angular CLI scaffolds your app.

Explore module basics in Angular, including what a module contains: declarations, imports, providers, and bootstrap, and how to create, import, and bootstrap a module like a reset module.

Create a project, delete test files, and remove the main page so that localhost serves a blank page. If you spend more than 10 or 15 minutes, review the solution.

Watch the exercise solution to see how to edit index.html, save, and run ng serve. In the next unit we explore components and start building real Angular applications.

Create and understand Angular components using the Angular CLI to generate a component, explore its TypeScript, HTML, and CSS files, and render it via its selector in a module.

Explore the angular component structure by examining the app component, its typescript class, and the decorator. Learn how components nest, render content, and how declarations, imports, and exports define scope.

Explore how view encapsulation isolates component styles in Angular, comparing emulated, native, none, and shadow dom approaches, with practical examples of two components and css scoping.

Master interpolation in Angular 7 by transferring data from the component's TypeScript to the template using template expressions, displaying dynamic values, and invoking methods within the template.

Learn how to bind events in Angular, pass data from the view to the component using click handlers and inputs, and use template reference variables to access values directly.

Explore property binding and two-way data binding in angular, compare interpolation, and implement ngModel with the forms module and banana in a box syntax to synchronize template and component.

Build an Angular app with two components: a text input that displays entered text and an image input that shows the chosen image, organized in root and image components.

Build a data-bound text input using ngModel and interpolation in an Angular 7 exercise. Create an image component that binds an image link and shows no image yet when missing.

Explore how to configure Angular routing with the router module, create an application routing module, and define routes to navigate between components and fetch and display data such as orders.

Create and configure routes in Angular by generating components, wiring them in the app routing module with a router outlet, and handling not-found and wildcard routes for navigation.

Learn template driven navigation in angular by using router link to switch components without page refresh and applying router link active for styling the active link.

Discover how to implement code-driven navigation in Angular by injecting the router and using navigate and navigateByUrl to move between routes, including child routes and route parameters.

Learn to define and pass url route parameters in angular routing, access them in the navigated component via ActivatedRoute, and navigate with parameters using router.navigate and router link.

Learn how query parameters in Angular allow optional data to be passed to routes, retrieved in components via route.queryParams, and bound in templates with a bound queryParams object using routerLink.

Master child routes in Angular 7 by nesting subroutes under a user path, using router outlet, and validating route arrays to avoid redundancy.

Practice Angular routing by implementing a login flow and navigating to home and view components through router links, while handling base paths and trailing slashes.

Implement angular routing with a login flow, router outlet, app routing module, and routes for home, view one, and view two using a username parameter.

Learn how Angular services hold business logic and provide data processing separate from components, and how dependency injection supplies service instances without using new.

Learn how to create an Angular service, understand the Injectable decorator, and inject the service into components using dependency injection, with a simple log function showing severity and message.

Learn how dependency injection injects services into Angular components, enabling singleton services and easier testing. Use injectable decorators and providers to expose services to the root injector and beyond.

Explore observable services in angular and how rxjs observables enable asynchronous data handling. Learn to use rxjs observables and subscribe to expose status in a component.

Explore a simple login exercise with username and password fields, showing a login alert and moving authentication logic into a dedicated service with data stored in the service.

Explore a simple angular login exercise: bind username and password, call login via an injected service, and use an observable boolean to reflect login status with a mock user list.

Learn how to integrate the Angular HTTP client into a service, connect the front end to a backend over HTTP, and set up dependency injection to fetch data.

Explore making get requests in Angular 7 using a mock backend, building a service with http client, performing get requests with query parameters and headers, and handling responses.

Handle responses in Angular by sending requests with the GDP client, mapping the server data to a response interface, and handling errors for 401 and 200 statuses using observables.

Implement an Angular 7 unit 8 exercise using an http client and mock backend to fetch a user by ID and display name, birth date, and email, including no-user handling.

Explore the exercise solution by wiring a backend service with http client in Angular, mapping a user model, binding the input, and displaying the retrieved user in the app component.

Explore template reference variables in Angular to access and manipulate form inputs in template-driven forms, enabling actions like printing an input value via a button click.

Explore the ngForm directive to add functionality to template-driven forms, linking inputs with ngModel, managing a form group, and enabling validation and error display.

Discover how Angular's forms framework validates an email input using ngModel and required. Show or hide errors based on validity and touched states, with CSS styling.

Style angular forms by applying validation states to form fields, using ng-invalid, ng-touched, and ng-dirty classes to toggle red or green borders, and simulate submit workflows.

Practice building a user form in an Angular 7 exercise, validating name, email, password, and phone number, showing errors and updating a consumer on submit, with optional styling.

Compare your exercise solution with a guided Angular 7 template-driven form implementation, featuring ngModel, validation, and live display of submitted user data.

Explore Angular attribute directives, including component directives, built-in attributes like router link directive, and the hidden decorator, and ngClass adds classes without altering the document object model.

Create and apply custom attribute directives in Angular by generating a directive with ng generate directive, configuring its selector, and attaching it to a DOM element to add behavior.

Apply an attribute directive to an html tag using the app sample selector, access the host element, and learn how prefixes prevent conflicts with native attributes while reducing code.

Explore accessing the host element in an angular 7 attribute directive with elementRef and hostListener to adjust font size on mouse events, and the input decorator passes values into directives.

Explore how the input decorator passes data from a parent to a data component, using property binding and input aliases in Angular directives and components.

Learn how to pass data into attribute directives in Angular using the input decorator, binding a font size value, and configuring default inputs and aliases for clearer component communication.

Build a box component in Angular by passing color, height, and width via input decorators to three directives; apply styles with decorators, set defaults, and update the box on click.

Discover how to build an Angular app by binding inputs to component properties, passing them to a box component, and using color, height, and width directives to reflect changes.