Modelos em Angular

No Angular, um modelo é um projeto para um fragmento de uma interface de usuário (UI). Os modelos são escritos em HTML e uma sintaxe especial pode ser usada em um modelo para criar muitos dos recursos do Angular.

Angular estende a sintaxe HTML em seus modelos com funcionalidade adicional.
Por exemplo, a sintaxe de ligação de dados do Angular ajuda a definir as propriedades do Document Object Model (DOM) dinamicamente.

Quase toda a sintaxe HTML é uma sintaxe de modelo válida. No entanto, como um modelo Angular é apenas um fragmento da interface do usuário, ele não inclui elementos como <html>, <body> ou <base>.

Nota:- Para eliminar o risco de ataques de injeção de script, o Angular não oferece suporte ao elemento <script> em modelos. Angular ignora a tag <script> e emite um aviso para o console do navegador. Para obter mais informações, consulte a página Segurança.

Exibindo valor com interpolação

A interpolação refere-se à incorporação de expressões no texto marcado. Por padrão, a interpolação usa chaves duplas {{ e }} como delimitadores.

Exemplo:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

Exemplo:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

As instruções de modelo são métodos ou propriedades que você pode usar em seu HTML para responder a eventos do usuário. Com instruções de modelo, seu aplicativo pode envolver os usuários por meio de ações como exibição de conteúdo dinâmico ou envio de formulários.

Exemplo:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

Assim como as expressões de modelo, as instruções de modelo usam uma linguagem que se parece com o JavaScript. No entanto, o analisador de instruções de modelo difere do analisador de expressões de modelo. Além disso, o analisador de instruções de modelo suporta especificamente atribuições básicas (=) e expressões de encadeamento com ponto-e-vírgula (;).

A seguinte sintaxe de expressão de modelo e JavaScript não é permitida:

1. novo
2. Operadores de incremento e decremento, ++ e —
3. Atribuições de operador, como += e -=
4. Os operadores bit a bit, como | e &
5. O operador de tubulação