Angular 17 notes - RychardGutierrez/angular-course GitHub Wiki


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.


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';

  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

  @if (isLoggin) {
  <p>Welcome user: {{ username }}</p>
  } @else{
  <p>You need login user</p>
  @for (game of games; track {
  <li>{{ }}</li>

Events and property Binding

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

  greet() {

  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;

    username="{{ username }}"

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 {


 @defer (on viewport) {
  <app-comments />
  } @placeholder {
  } @loading {
⚠️ ** Fallback** ⚠️