Passo a passo para criar seu primeiro elemento Angular

Passo a passo para criar seu primeiro elemento Angular

Angular Elements nos permite criar controles de Angular reutilizáveis, que podem ser usados fora do aplicativo Angular. Saiba como criar seu primeiro elemento.

4min read

Angular Elements nos permite criar componentes Angular reutilizáveis, que podem ser usados fora do aplicativo Angular. Você pode usar um elemento Angular em qualquer outro aplicativo, como HTML normal, React, etc.  Essencialmente, Angular Elements são componentes normais, que são empacotados como Custom Elements. Você pode aprender mais sobre elementos personalizados aqui.

Angular Elements são componentes reutilizáveis, que podem ser usados fora Angular.  Você pode aprender mais sobre

Vamos manter as coisas simples neste post e, passo a passo, aprender a criar um elemento Angular básico. Então, vamos começar.

Step 1: Installation

Criar um novo projeto usando Angular CLI

ng new demo1

Depois que o projeto for criado, altere o diretório para demo1 e instale Angular Elements. Para isso, execute um comando npm, conforme mostrado abaixo:

npm install @angular/elements

Para trabalhar com navegadores mais antigos, precisamos de polyfill. Então, vamos instalar isso também como mostrado abaixo:

npm install @webcomponents/custom-elements

Depois de instalar o polyfill, abra polyfills.ts arquivo e adicione estas duas entradas:

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

Etapa 2: Criar o componente

Nesta etapa, criaremos um componente reutilizável, que seria usado como um 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 é um componente muito simples com duas propriedades decoradas com o decorador @Input().

Etapa 3: Registrar o componente

Para registrar um componente a ser usado como um elemento Angular, precisamos executar as seguintes tarefas:

  • Componente de importação.
  • Pass it in declarations array.
  • Passe o componente na matriz entryComponents.
  • Não passe nenhum componente na matriz de bootstrap.
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 {
 
 }

Não precisamos inicializar elementos personalizados. Eles serão criados automaticamente quando adicionados ao DOM e destruídos quando removidos do DOM, no entanto, eles precisam ser criados de alguma forma, portanto, estamos adicionando-os na matriz entryComponents. Você deve conhecer essa propriedade do componente dinâmico.

Etapa 4: Criar elemento a partir do componente

Precisamos invocar createCustomElement para criar um elemento personalizado a partir de um componente Angular. Para fazer isso, primeiro importe os seguintes itens em angular.module.ts

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

Depois de importar os módulos necessários no AppModule, precisamos criar um elemento personalizado, conforme mostrado na listagem abaixo. Além disso, estamos chamando manualmente 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 o elemento personalizado em qualquer arquivo html externo. Em outro artigo, abordaremos isso. Para usar o elemento personalizado criado em index.html de uma mesma aplicação angular, basta colocá-lo no corpo, conforme mostrado abaixo:

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

Agora execute o aplicativo usando o comando ng serve e você deve ter o elemento personalizado renderizado, conforme mostrado na imagem abaixo:

aplicativo usando o comando ng serve e você deve ter o elemento personalizado renderizado

Portanto, podemos concluir que para trabalhar com Angular Elemento Personalizado, precisamos executar as seguintes etapas:

  1. Install @angular/elements
  2. Criar componente
  3. Registrar componente em entryComponent
  4. Invoke createElement to create custom element
  5. Use-o em html

Espero que você ache este post útil. Obrigado por ler.  Se você gostou deste post, por favor, compartilhe-o. Além disso, se você não tiver feito check-out Infragistics Ignite UI for Angular Componentes, certifique-se de fazê-lo! Eles têm 30+ componentes de Angular baseados em materiais para ajudá-lo a codificar aplicativos da web mais rapidamente.

Angular
Solicite uma demonstração