null
US
Entrar
Registre-se gratuitamente
Registre-se
Detectamos que o JavaScript não está habilitado no teu navegador. Habilite o Javascript para o funcionamento correto do nosso site. Por favor, leia os
Termos e Condições
para mais informações.
Próximo
Copiar e Editar
Você deve estar logado para concluir esta ação!
Inscreva-se gratuitamente
6049031
Angular 2 Template Syntax
Descrição
Angular 2 Template Syntax Mind Map
Sem etiquetas
angular 2
template syntax
angular 2
template syntax
Mapa Mental por
Nick Codes
, atualizado more than 1 year ago
Mais
Menos
Criado por
Nick Codes
quase 8 anos atrás
75
4
0
Resumo de Recurso
Angular 2 Template Syntax
Expressions
Can be within {{ x + x }}
Can be within [property]="x + x"
Context
Only has access to items in the current context (not global scope)
Guidelines
No Visible Side Effects, Shouldn't Change Application State
Keep them as SIMPLE as possible
Most Template Expressions Get Run After Almost Every Event
Make Expressions "Idempotent"
Should always return the same thing until one of it's dependent values changes
Statements
Responds to user events raised by a binding target
Alters Application State
Context
Only Access to Current Context
Guidelines
Keep as Simple as Possible, simple method call or property assignment
Binding Syntax
One Way, Data Source -> View
{{expression}}, [input or property]
Two Way
[(property)]
One Way, View -> Data Source
(event)
REMINDER
Template binding works with properties and events, NOT attributes.
hero="Nick" & [hero]="Nick"
One gets rendered as a string while the other gets rendered as expression
Binding Targets
[ngClass]
[class.isSpecial]
[attr.attribute]
(event)
[src]
[style.color]
Custom Events
(lookedAt)="handleEvent($event)"
$event object handles the payload
Payload is given by EventEmitter.emit on Component Level
Built in Directives
*ngIf="expression"
*ngFor="let x of xes"
*ngFor="let object of objects; trackBy:expression"
expression(index: number, hero: Hero) {return hero.id}
Eliminates unnecessary DOM updates for unchanged Objects
* is Syntactic Sugar
Shows that it changes HTML
Pipes
{{name | pipe}}
Incredibly useful for formatting
Can take arguments
{{name | pipe:''long"}}
Safe Navigation Operator
Protect against null values when rendering components
{{game?.points?.name}}
Stops rendering the component if one or more values isnt found
Better than error
Anexos de mídia
8174bb4e-5efc-4c57-8195-9c8b5d9267d3 (image/png)
Quer criar seus próprios
Mapas Mentais
gratuitos
com a GoConqr?
Saiba mais
.
Semelhante
Angular 2 Change Detection
Nick Codes
ENEM
Day Almeida
Direito Constitucional - Brutal - Tribunais
Rômulo Campos
Revisão Para oENEM 2016
GoConqr suporte .
Sala de Aula Invertida
miminoma
Quiz Unidade IV
Aline Matos2981
Engenharia
robson kuskowski
Mapa Mental - Fungos
Leonardo Bermudes
PLANEJAMENTO DE LÍNGUA PORTUGUESA 2018 - 2ª ETAPA
Adriana Marcia Couto Poletti
Simulado CTFL- Agile Tester
Larissa Trindade
Contextualização da Aula 3 - Tecnologia na Formação Profissional - SAÚDE
Fabrícia Assunção
Explore a Biblioteca