Paso a paso para crear tu primer elemento Angular

Angular Elements nos permiten crear componentes de Angular reutilizables, que se pueden utilizar fuera de la aplicación Angular. Puede utilizar un elemento Angular en cualquier otra aplicación, como HTML normal, React, etc.  Básicamente, Angular elementos son componentes normales, que se empaquetan como elementos personalizados. Puedes obtener más información sobre los elementos personalizados aquí.

Angular Los elementos son componentes reutilizables, que se pueden utilizar fuera de Angular.  Puede obtener más información sobre

En este post vamos a simplificar las cosas y, paso a paso, vamos a aprender a crear un Angular Element básico. Entonces, comencemos.

Step 1: Installation

Creación de un nuevo proyecto mediante Angular CLI

ng new demo1 

Una vez creado el proyecto, cambie el directorio a demo1 e instale Angular Elements. Para eso, ejecute un comando npm, como se muestra a continuación:

npm install @angular/elements

Para trabajar con navegadores más antiguos, necesitamos polyfill. Por lo tanto, instalemos eso también como se muestra a continuación:

npm install @webcomponents/custom-elements

Después de instalar polyfill, abra polyfills.ts archivo y agregue estas dos entradas:

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

Paso 2: Crear el componente

En este paso, crearemos un componente reutilizable, que se utilizaría como un elemento Angular.

import { Component, Input } from '@angular/core';
 
  @Component({
      selector: 'app-message',
      template: `
 <h1 style='text-center'>{{title}}</h1>
  <h2>hey {{name}} loving Angular Elements {{answer}}</h2>
`,
      styles: ['h2 {color:red;}']
  })
  export class MessageComponent {
      title = 'Angular Elements';
      @Input() name: string;
      @Input() answer: string;
  }

MessageComponent es un componente muy simple con dos propiedades decoradas con el decorador @Input().

Paso 3: Registrar el componente

Para registrar un componente que se utilizará como elemento Angular, debemos realizar las siguientes tareas:

• Componente de importación.
• Pass it in declarations array.
• Pase el componente en la matriz entryComponents.
• No pase ningún componente en la matriz de arranque.

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { MessageComponent } from './message.component';
 
 @NgModule({
     declarations: [
         MessageComponent
     ],
     imports: [
         BrowserModule
     ],
     providers: [],
     bootstrap: [],
     entryComponents: [MessageComponent]
 })
 export class AppModule {
 
 }

No necesitamos arrancar elementos personalizados. Se crearán automáticamente cuando se agreguen al DOM y se destruirán cuando se eliminen del DOM, sin embargo, deben crearse de alguna manera, por lo tanto, los estamos agregando en la matriz entryComponents. Debe conocer esta propiedad del componente dinámico.

Paso 4: Crear un elemento a partir del componente

Necesitamos invocar createCustomElement para crear un elemento personalizado a partir de un componente Angular. Para ello, primero importe los siguientes elementos en angular.module.ts

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

Después de importar los módulos necesarios en el AppModule, necesitamos crear un elemento personalizado como se muestra en la lista a continuación. Además, estamos llamando manualmente a ngDoBootstrap.

export class AppModule {
 
      constructor(private injector: Injector) {
          const customElement = createCustomElement(MessageComponent, { injector });
          customElements.define('app-message', customElement);
      }
 
      ngDoBootstrap() {
 
      }
  }

Step 5: Use Custom Element

Idealmente, usaremos el elemento personalizado en cualquier archivo html externo. En un artículo posterior, hablaremos de ello. Para usar el elemento personalizado creado en index.html de la misma aplicación angular, simplemente colóquelo en el cuerpo, como se muestra a continuación:

<body>
        <!-- <app-root></app-root> -->
        <app-message name="dj" answer="yes"></app-message>
</body>

Ahora ejecute la aplicación usando el comando ng serve y debería tener el elemento personalizado renderizado, como se muestra en la siguiente imagen:

Por lo tanto, podemos concluir que para trabajar con Angular Elemento Personalizado, necesitamos realizar los siguientes pasos:

1. Install @angular/elements
2. Crear componente
3. Registrar componente en entryComponent
4. Invoke createElement to create custom element
5. Úsalo en html

Espero que este post te sea útil. Gracias por leer.  Si te ha gustado este post, compártelo. Además, si no ha realizado Infragistics Ignite UI for Angular Componentes, ¡asegúrese de hacerlo! Tienen 30+ componentes de Angular basados en material para ayudarlo a codificar aplicaciones web más rápido.