Angular 17

Get Started. It's Free
or sign up with your email address
Angular 17 by Mind Map: Angular 17

1. NgModels

2. Routing

3. Server Communication

4. Workflow

5. fundamentals

5.1. npm install -g @angular/cli

5.2. ng new my-angular-project

5.2.1. cd my-angular-project

5.2.1.1. ng serve

6. working with templates

6.1. Accessibility

6.1.1. people with disabilities

6.2. Animations

6.3. Attribute, class, and style bindings

6.3.1. <a [href]="product.url">View Product</a>

6.3.2. <button [class.disabled]="!isActive">Buy Now</button>

6.3.3. <div [style.background-color]="selectedColor">This is a box!</div>

6.4. Attribute directives

6.4.1. ngStyle: Dynamically sets styles on elements based on data.

6.4.2. ngClass: Adds or removes CSS classes based on conditions.

6.4.3. ngModel: Two-way data binding for forms.

6.5. Binding syntax

6.5.1. <input type="text" [(ngModel)]="productName">

6.6. Built-in template functions

6.6.1. *ngIf

6.6.2. *ngFor

6.6.3. json

6.6.4. slice

6.6.5. uppercase, lowercase: Changing text case.

6.6.6. date: Formatting dates.

6.7. Content projection

6.7.1. create parent components that act as containers for child components.

6.7.1.1. <ng-content></ng-content>

6.8. Interpolation

6.8.1. Allows for dynamic content based on your component's data.

6.8.1.1. {{ product.price }}

6.9. Template expression operators

6.9.1. 1. Pipe Operator ( | )

6.9.1.1. <span>Price: {{ product.price | currency:'USD' }}</span>

6.9.2. 2. Safe Navigation Operator ( ? )

6.9.2.1. <span *ngIf="user">Welcome, {{ user?.name }}</span>

6.9.3. 3. Non-Null Assertion Operator ( ! )

6.9.3.1. <img [src]="imageUrl!">

6.10. Template reference variables

6.10.1. <input type="text" id="username" #usernameInput>

6.10.1.1. submitForm() { const username = this.usernameInput.nativeElement.value; }

6.11. <ngcontainer>

6.11.1. <ng-container> is like a hidden section in your Angular template. It holds projected content but doesn't become a visible element in the DOM.

6.11.1.1. <ng-container *ngIf="!items.length"> <span>No items to display!</span> </ng-container>

6.12. Pipes

6.12.1. Pipes transform data before it's shown to the customer (user).

7. working with components

8. Dependency Injections

9. Forms