AngularComponentBasic

🅰Creación de proyecto para tener listado: Componentes, módulos, One way data binding, Cli...

🐦 Sitio Web

Hosting URL: Dragon Ball Z

Hosting GitHub 👉 : AngularComponentBasic

🚀Dos formas de crear proyecto

npm init @angular myApp
ng new my-app

🎱 URL Importantes

https://getbootstrap.com
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

https://angular.io/guide/interpolation

https://getbootstrap.com/docs/5.3/components/list-group/#variants

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

[https://angular.io/guide/singleton-services](https://angular.io/guide/singleton-services)

https://www.npmjs.com/package/uuid

https://www.npmjs.com/package/http-server

https://www.npmjs.com/package/del-cli

https://www.npmjs.com/package/copyfiles

📌 Directivas incluídas

Dentro del módulo “CommonModule” de @angular/common

👉 *ngIf: Remueve o crea una parte del DOM basado en la expresión “showSection”

<section *ngIf="showSection">

👉 *ngFor: Convierte el li en un template, y lo usa para duplicarlo basado en la cantidad de elementos dentro de la lista

<li *ngFor="let item of list">

👉 ngClass: Enlaza clases de css basado en un objeto o expresión

<div [ngClass]="{'active': isActive,
 'disabled': isDisabled}">

👉 FormsModule de @angular/forms

<input [(ngModel)]="userName"

📌 Decoradores de clase para componentes

@Input: Define una propiedad que puede ser enviada desde el padre hacia el componente hijo.

@Input() myProperty

Ejemplo:

<my-cmp [myProperty]="someExpression">

@Output: Define una salida del componente que el componente padre puede suscribirse para escuchar.

@Output() myEvent = new EventEmitter();