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.
Link: https://angular.dev/overview
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]
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>
<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>
<button (click)="onLogin()">Click to start session</button>
username = 'Ana';
isLoggin = false; // this is a state
greet() {
console.log('hello');
}
onLogin() {
this.isLoggin = true;
}
// Father component
<app-games username="{{ username }}" />
// Child component
@Input() username = '';
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 () {
<app-comments />
}
with placeholder on viewport
@defer (on viewport) {
<app-comments />
} @placeholder {
<p>placeholder...</p>
}
Loading
@defer (on viewport) {
<app-comments />
} @placeholder {
<p>Placeholder...</p>
} @loading {
<p>Loading...</p>
}
</div>