Here is a resume of angular path.

Concept

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Module

NgModules provides compilation context of component. An Angular application has a least a root module that enables bootstrapping. NgModules can import from other NgModules, and allow their own functionality to be exported and used by other modules.

NgModules are containers for a cohesive block pf code dedicated to an application domain, workflow, or a closely related set of capabilities.

NgModule decorator

The @NgModule decorator is a function whose properties describe the module :

• declarations : The components, directives and pipes that belong to this module
• exports : The subset of declarations that should be visible of other NgModule
• imports : Other module whose exported class are used
• providers : Creators of services that this NgModule contributes to the global collection of services; they become accessible in all part of the application.
• bootstrap : the main application view called root component, which hosts all other app views.

NgModules provide a compilation context for their components. The components that belong the same NgModule share a compilation context.

Component

Components define areas of responsibility in the user interface, or UI, that let you reuse sets of UI functionality.

A component consists of three things:

• A component class that handles data and functionality (.ts file)
• An HTML template that determines the UI (.html file)
• Component-specific styles that define the look and feel (.css file)

When the Angular CLI generates a new component, it includes an empty constructor, the OnInit interface, and the ngOnInit()

app-root component is the application shell. This is the first component to load and the parent of all other components. You can think of it as the base page.

Notice the @Component() decorator. This indicates that the following class is a component. It provides metadata about the component, including its selector, templates, and styles.

• The selector identifies the component. The selector is the name you give the Angular component when it is rendered as an HTML element on the page. By convention, Angular component selectors begin with the prefix app-, followed by the component name.
• The template and style filenames reference the HTML and CSS files that StackBlitz generates.

A Component and its template together define a view. A component can contain a view hierarchy which allow you to define arbitrarily complex areas of the screen.

When you create a component, it’s associated directly with a single view called the host view.

Template

A template combines HTML with angular markup that can modify html elements before they are displayed :

• Event binding lets your app respond to user input in the target by updating your application data
• Property binding lets you interpolate values that are computed from your application to the HTML

Angular supports two-way binding, meaning that changes in the DOM (Document Object Model), such as user choices, are also reflected in your program data.

Templates can use pipe to improve the user experiences by transforming values to display.

Services

Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular’s dependency injection system.

Services are the place where you share data between parts of your application.

Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

Servers often return data in the form of a stream. Streams are useful because they make it easy to transform the returned data and make modifications to the way you request that data. The Angular HTTP client, HttpClient, is a built-in way to fetch data from external APIs and provide them to your app as a stream.

Service can depend on other services.

To define a class as a service, use the @Injectable() to provide the metadata that allows angular to inject it into a component as a dependency.

Dependency Injection

DI is wired into the angular framework and used everywhere to provide new components with the services or other things they need.

The Injector is the main mechanism. Angular creates an application-wide injector for you during the bootstrapping process. An injector creates dependencies, and maintains a container of dependency instances that it reuses if possible.

A provider is an object that tells an injector how to obtain or create a dependency.

When angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested instance doesn’t yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to angular.

Routing

The Angular module Router enables you to show different components and data to the user based on where the user is in the application. The router enables navigation from one view to the next as users perform tasks such as the following:

• Entering a URL in the address bar to navigate to a corresponding page.
• Clicking links on the page to navigate to a new page.
• Clicking the browser’s back and forward buttons to navigate backward and forward through the browser history.

If the router determines that the current application state requires particular functionality, the router can lazy-load the module on demand.

A route associates one or more URL paths with a component.

Pipes

Angular pipes let you declare display-value transformations in your template HTML. A class with @Pipe decorator defines a function that transforms input values to output values for display in a view.

Angular defines a default set of pipes.

Use [routerLink]; The RouterLink directive gives the router control over the anchor element.

    <!-- fullDate format: output 'Monday, June 15, 2015'-->
    <p>The date is </p>

Directives

A directive is a class defined with a @Directive() decorator. There are 2 kinds of directives :

• structural : alter layout by adding, removing and replacing elements form the DOM. For example <li *ngFor="let hero of heroes"></li>
• attribute : alter the appearance or behavior of existing element. For example <input [(ngModel)]="hero.name">

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given in the directives.

Overview

Anglular libraries

Angular loads as a collection of javascript modules. Each angular library name begins with the @angular prefix.

Part 1

With *ngFor, the <div> repeats for each element in the list.

*ngFor is a “structural directive”. Structural directives shape or reshape the DOM’s structure, typically by adding, removing, and manipulating the elements to which they are attached. Directives with an asterisk, *, are structural directives.

The app now has a product list and sharing feature. In the process, you’ve learned to use five common features of Angular’s template syntax:

• *ngFor
• *ngIf
• Interpolation `` renders a property’s value as text
• Property binding [ ] lets you use the property value in a template expression
• Event binding ( ) : Event binding uses a set of parentheses ( )

Input

The @Input() decorator indicates that the property value passes in from the component’s parent

Output

The @Output() decorator of EventEmitter() the component to emit an event when the value of the notify property changes.

Fetching data

The async pipe returns the latest value from a stream of data and continues to do so for the life of a given component. When Angular destroys that component, the async pipe automatically stops.

Forms in Angular

Forms in Angular build upon the standard HTML forms to help you create custom form controls and easy validation experiences. There are two parts to an Angular Reactive form: the objects that live in the component to store and manage the form, and the visualization of the form that lives in the template.

The ReactiveFormsModule provides the FormBuilder service, which AppModule (in app.module.ts).

in HTML file, use <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)>