Angular 12 Diseño de componentes y directivas Directivas ⮚ Se utilizan para manipular el DOM. ⮚ Mediante el uso de directivas angulares, puede cambiar la apariencia, el comportamiento o el diseño de un elemento DOM. ⮚ También te ayuda a extender HTML. Directivas Estructurales ⮚ Algunas de las directivas estructurales comienzan con un signo *. ⮚ Estas directivas se utilizan para manipular y cambiar la estructura de los elementos DOM, por ejemplo ⮚ *ngIf ⮚ *ngFor ⮚ ng-template ⮚ ngSwitch / *ngSwitchCase Directivas de Atributos ⮚ Las directivas de atributos se utilizan para cambiar el aspecto y el comportamiento de los elementos DOM. Por ejemplo ⮚ ngStyle ⮚ ngClass Componentes ⮚ Un componente se basa en la creación de fragmentos con vista, estilos y controladores de forma que puedan ser reutilizadas en distintas partes de la web ⮚ La vista (html) y los estilos (css), definen qué y cómo queremos representar la web. En los controladores se encuentra la lógica de los componentes. Desde este archivo podemos inicializar las variables para la vista, actualizarlos, llamar a otros archivos, crear funciones, etc. ⮚ Ej. Una estructura de componentes con componentes padres e hijos puede ser la siguiente: app home title Book BookList BooksDetail Componentes @Component ⮚ Un Template, es un HTML que indica la estructura visual. ⮚ Un Class, formada a su vez por Properties y Methods, atributos y funciones que definen el comportamiento de la clase. ⮚ Una Metadata, que sirve para indicar un nombre mediante el cual referenciar al componente desde nuestro HTML. Estructura de un Componente Importamos ‘Component’ de @angular/core, y se llama a @Component y le pasamos tres cosas (de momento): ⮚ Selector: El selector es el nombre que va a tener la etiqueta html que se crea con el componente, es decir desde el html de cualquier otro componente, poniendo esa etiqueta se pintará el componente. ⮚ Angular tiene una convención de nombre para el selector, kebab-case (el nombre de los selectores tiene que ser una palabra seguida de un guión y otra palabra: app-ejemplo). ⮚ TemplateUrl: La url componente. de la vista html asociada al ⮚ StyleUrl: La url del estilo CSS asociado al componente. Por último hacemos export class y el nombre de la clase. Comunicar componentes acoplados La comunicación de componentes es una característica muy importante dentro de una aplicación web. Hay aplicaciones en los cuales es necesario que un componente padre envié información hacia un componente hijo para que este pueda mostrar la información con más detalle. También tenemos casos donde un componente hijo necesita enviar información a un componente padre. Los casos de uso de la comunicación entre componentes pueden ser innumerables, así que es necesario estudiarlo y comprenderlos para poder construir aplicaciones realmente potentes. A continuación explicaremos estos dos tipos de comunicación que mencionamos. @Input @Output EventEmitter De componente padre a hijo Dentro de nuestro componente hijo necesitamos una librería llamada Input que nos permitirá utilizar un decorator mediante el cual declararemos las variable donde recibiremos los datos enviados por el componente padre. De componente hijo a padre Para esto dentro de nuestro componente hijo utilizaremos dos librerías de Angular Output y EventEmitter. El mensaje será enviado a forma de evento emitido por el componente hijo. En el componente hijo usamos el siguiente código que pasamos a explicar a continuación. Principio de responsabilidad unica - unica funcionalidad Smart Components - por comportamiento - componentes de página - ionic -> home.page.ts - homePage.component.ts - home.page.ts → angular 10 - componentes fetch (listado/contenedor/smart) - books.component.ts - bookList.component.ts - bookFetch.component.ts - bookContainer.component.ts - componente de renderizado (detalle) - book.component.ts - bookDetail.component.ts - bookMin.component.ts total reservados: 20 Libro 1 - 4 libro 2 - 16 nombre del autor Autor reservar título Autor reservar título Autor reservar título Autor AppComponent AppModule page/homePage reservar AppRouting datasource components/bookListExample components/bookSelectCont components/bookExample Interface localhost:4200/map componente ubigeo título dinámico modules/maps MapRouter pages/home.page.ts Árbol temático MapContainer google map 1. 2. 3. elegir distrito cambiar el zoom mapa en un punto del distrito detectar el ubigeo eligodo extraer el punto de un api rest enviar los datos para que pinte el mapa en un zoom MapRender localhost:4200/report componente ubigeo título dinámico modules/reposrt pages/home.page.ts Árbol temático ReportContainer ReportContainer Table ReportRouter Qué son los Pipes ⮚ Las pipes son filtros o funciones que pones directamente en la vista para el dar formato a un dato que estés pintando. ⮚ Los pipes nos permiten transformar visualmente nuestros datos, de esta manera podemos mostrar datos con una mejor experiencia de usuario, ⮚ Un ejemplo muy practico es el de la fecha, seguramente la mayoría de nosotros prefiere ver un formato de fecha como: “23 años Comprometidos con la capacitación de profesionales en el Perú”
