Mudanças entre as edições de "Angular"
Ir para navegação
Ir para pesquisar
| Linha 23: | Linha 23: | ||
==Data Binding== | ==Data Binding== | ||
| − | + | ===Interpolation (sem espaços)=== | |
{ { title } } (HTML) | { { title } } (HTML) | ||
public title: string="Título" (TS) | public title: string="Título" (TS) | ||
| − | + | ===Property Binding=== | |
<button [disabled]="disableButton">Botão</button> (HTML) | <button [disabled]="disableButton">Botão</button> (HTML) | ||
<img [src]="imageCapaURL"> (HTML) | <img [src]="imageCapaURL"> (HTML) | ||
<img src="{{imageCapaURL}}"> (HTML) | <img src="{{imageCapaURL}}"> (HTML) | ||
| − | + | ===Event Binding=== | |
<button (click)="calc()">Calcular</button> (HTML) | <button (click)="calc()">Calcular</button> (HTML) | ||
| − | + | ===Two-way binding=== | |
<input [[ngModel]]="nome"> (HTML) | <input [[ngModel]]="nome"> (HTML) | ||
<span>{{nome}}</span> (HTML) | <span>{{nome}}</span> (HTML) | ||
Edição das 12h05min de 18 de junho de 2023
Índice
NG Client
Criando projeto
ng new [project name]
Cirar projeto com as rotas
ng new [project name] --routing --defaults
- Componentes
- Diretivas
- Serviços
- Módulos
Componentes
Novo componente
ng g c [/modules/brapci/headers/head]
Route - Routas
ng generate module app-routing --flat --module=app
Nova Inteface
ng g interface /modules/interface/vocabulary
Data Binding
Interpolation (sem espaços)
{ { title } } (HTML)
public title: string="Título" (TS)
Property Binding
<button [disabled]="disableButton">Botão</button> (HTML) <img [src]="imageCapaURL"> (HTML) <img src="Predefinição:ImageCapaURL"> (HTML)
Event Binding
<button (click)="calc()">Calcular</button> (HTML)
Two-way binding
<input ngModel="nome"> (HTML) Predefinição:Nome (HTML) public nome="Nome" (TS)
Services
ng g s data/isbn
- Incluir no app.component (Http)
Formulários
Ciclo de Vida
Cookie
npm install ngx-cookie-service
public ngOnInit(): void
{
if (this.CookieService.check('library'))
{
this.CookieService.set('library','1');
console.log(this.CookieService.getAll());
} else {
} }
Bootstrap Angular
ng add @ng-bootstrap/ng-bootstrap
npm install bootstrap bootstrap-icons /* Editar o arquivoi angular.json */ "styles": [ "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]
npm install @ng-bootstrap/ng-bootstrap
Variáveis
public title:string = "Brapci"; public valor:number = 1; public valido:boolean = true;
Funções
Rodando servidor
ng s
