Angular 17 notes - RychardGutierrez/angular-course GitHub Wiki

Introduction

Angular is a web framework that empowers developers to build fast, reliable applications. Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and libraries to simplify and streamline your development workflow. Angular gives you a solid platform on which to build fast, reliable applications that scale with both the size of your team and the size of your codebase.

Link: https://angular.dev/overview

Start project

Install angular cli

npm i -g @angular/cli

Version angular

ng version

Start a new project

ng new [name project]

Generate component

ng generate component [name component]

Struct files

struct files Angular

Pass properties to template

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  city = 'New York';
}

In the HTML document

<h3>{{ city }}</h3>

Export and Import components

component in angular

Sentence IF and FOR

<section>
  @if (isLoggin) {
  <p>Welcome user: {{ username }}</p>
  } @else{
  <p>You need login user</p>
  }
</section>

<ul>
  @for (game of games; track game.id) {
  <li>{{ game.name }}</li>
  }
</ul>

Events and property Binding

<button (click)="onLogin()">Click to start session</button>
  username = 'Ana';
  isLoggin = false; // this is a state

  greet() {
    console.log('hello');
  }

  onLogin() {
    this.isLoggin = true;
  }

Props and communication to another component

  // Father component 
  <app-games username="{{ username }}" />

 // Child component
 @Input() username = '';

Comunication child to father component

Father component

  favGame: String = '';
  getFavorite(nameGame: String) {
    this.favGame = nameGame;
  }

 <app-games
    username="{{ username }}"
    (addFavoriteGameEvent)="getFavorite($event)"
  />

Child component

 @Output() addFavoriteGameEvent = new EventEmitter<String>();

Defer to lazy load components

  @defer () {
  <app-comments />
  }

with placeholder on viewport

  @defer (on viewport) {
  <app-comments />
  } @placeholder {
  <p>placeholder...</p>
  }

 @defer (on viewport) {
  <app-comments />
  } @placeholder {
  <p>Placeholder...</p>
  } @loading {
  <p>Loading...</p>
  }
</div>