Angular 2 - Componentes

Os componentes são uma parte lógica do código para o aplicativo Angular JS. Um componente consiste no seguinte -

  • Template- Isso é usado para renderizar a visualização do aplicativo. Ele contém o HTML que precisa ser processado no aplicativo. Esta parte também inclui a vinculação e as diretivas.

  • Class- É como uma classe definida em qualquer linguagem, como C. Isso contém propriedades e métodos. Este contém o código que é usado para dar suporte à visualização. É definido em TypeScript.

  • Metadata- Isso contém os dados extras definidos para a classe Angular. É definido com um decorador.

Vamos agora para o arquivo app.component.ts e criar nosso primeiro componente Angular.

Vamos adicionar o código a seguir ao arquivo e examinar cada aspecto detalhadamente.

Classe

O decorador da turma. A classe é definida em TypeScript. A classe normalmente tem a seguinte sintaxe em TypeScript.

Sintaxe

class classname {
   Propertyname: PropertyType = Value
}

Parâmetros

  • Classname - Este é o nome a ser dado à aula.

  • Propertyname - Este é o nome a ser dado ao imóvel.

  • PropertyType - Como o TypeScript é fortemente tipado, você precisa fornecer um tipo à propriedade.

  • Value - Este é o valor a ser atribuído ao imóvel.

Exemplo

export class AppComponent {
   appTitle: string = 'Welcome';
}

No exemplo, os seguintes itens precisam ser observados -

  • Estamos definindo uma classe chamada AppComponent.

  • A palavra-chave export é usada para que o componente possa ser usado em outros módulos no aplicativo Angular JS.

  • appTitle é o nome da propriedade.

  • A propriedade recebe o tipo de string.

  • A propriedade recebe o valor 'Bem-vindo'.

Modelo

Esta é a visualização que precisa ser renderizada no aplicativo.

Sintaxe

Template: '
   <HTML code>
   class properties
'

Parâmetros

  • HTML Code - Este é o código HTML que precisa ser processado no aplicativo.

  • Class properties - Estas são as propriedades da classe que podem ser referenciadas no modelo.

Exemplo

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

No exemplo, os seguintes itens precisam ser observados -

  • Estamos definindo o código HTML que será processado em nosso aplicativo

  • Também estamos fazendo referência à propriedade appTitle de nossa classe.

Metadados

Isso é usado para decorar a classe Angular JS com informações adicionais.

Vamos dar uma olhada no código completo com nossa classe, modelo e metadados.

Exemplo

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

No exemplo acima, as seguintes coisas precisam ser observadas -

  • Estamos usando a palavra-chave import para importar o decorador 'Component' do módulo angular / core.

  • Em seguida, estamos usando o decorador para definir um componente.

  • O componente possui um seletor chamado 'my-app'. Isso nada mais é do que nossa tag html personalizada, que pode ser usada em nossa página html principal.

Agora, vamos para nosso arquivo index.html em nosso código.

Vamos nos certificar de que a tag body agora contém uma referência à nossa tag personalizada no componente. Assim, no caso acima, precisamos nos certificar de que a tag body contém o seguinte código -

<body>
   <my-app></my-app>
</body>

Resultado

Agora, se formos ao navegador e vermos a saída, veremos que a saída é renderizada como está no componente.