2,306
edits
Changes
Jump to navigation
Jump to search
mLine 16:
Line 16: − + Line 28:
Line 28: − + Line 37:
Line 37: − + − + Line 49:
Line 49: − + Line 64:
Line 64: − + Line 76:
Line 76: − + − + Line 84:
Line 84: − + Line 98:
Line 98: − + − + − + − + − + + + + + − + Line 122:
Line 126: + + Line 129:
Line 135: − + + +
→login.component.ts
</syntaxhighlight>
</syntaxhighlight>
== ng Commands ==
==ng Commands==
<syntaxhighlight lang="bash">
<syntaxhighlight lang="bash">
ng new my-app
ng new my-app
</syntaxhighlight>
</syntaxhighlight>
== Tests ==
==Tests==
ng test runs Jasmine tests
ng test runs Jasmine tests
ng e2e runs end to end tests with protractor, code at e2e folder
ng e2e runs end to end tests with protractor, code at e2e folder
== angular.json ==
==angular.json==
Defines angular commands behavior
Defines angular commands behavior
== Components ==
==Components==
Code (TypeScript) -> *.component.ts
Code (TypeScript) -> *.component.ts
=== app.component.ts ===
===app.component.ts===
<syntaxhighlight lang="typescript">
<syntaxhighlight lang="typescript">
import { Component } from '@angular/core';
import { Component } from '@angular/core';
</syntaxhighlight>
</syntaxhighlight>
=== app.component.html ===
===app.component.html===
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<div style="text-align:center">
<div style="text-align:center">
</syntaxhighlight>
</syntaxhighlight>
== Syntax ==
==Syntax==
=== import ===
===import===
<syntaxhighlight lang="typescript">
<syntaxhighlight lang="typescript">
import {Component, OnInit} from '@angular/core';
import {Component, OnInit} from '@angular/core';
</syntaxhighlight>
</syntaxhighlight>
=== class definition ===
===class definition===
<syntaxhighlight lang="typescript">
<syntaxhighlight lang="typescript">
export class WelcomeComponent implements OnInit {
export class WelcomeComponent implements OnInit {
</syntaxhighlight>
</syntaxhighlight>
== Login Component example ==
==Login Component example==
from command line:<syntaxhighlight lang="bash">
from command line:<syntaxhighlight lang="bash">
ng generate component login
ng generate component login
</syntaxhighlight>
</syntaxhighlight>
=== login.component.html ===
===login.component.html===
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
Username: <input type="text" name="username" [(ngModel)]="username">
<small *ngIf=invalidLogin>{{ errorMessage }}</small>
Password: <input type="password" name="password" [(ngModel)]="password">
<div>
<button (click)=handleLogin()>Login</button>
Username: <input type="text" name="username" [(ngModel)]="username">
Password: <input type="password" name="password" [(ngModel)]="password">
<button (click)=handleLogin()>Login</button>
</div>
</syntaxhighlight>
</syntaxhighlight>
=== login.component.ts ===
===login.component.ts===
<syntaxhighlight lang="typescript">
<syntaxhighlight lang="typescript">
import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
username = 'Rafa'
username = 'Rafa'
password = ''
password = ''
errorMessage = 'Invalid credentials'
invalidLogin = false
constructor() { }
constructor() { }
handleLogin(){
handleLogin(){
console.log(this.username)
// console.log(this.username)
this.invalidLogin = !(this.username === 'Rafa' && this.password === 'abcd');
}
}
}
}
</syntaxhighlight>In order to be able to use [(ngModel)]=... you need to add the formsModule to your app.module.ts:<syntaxhighlight lang="typescript">
</syntaxhighlight>In order to be able to use [(ngModel)]=... you need to add the formsModule to your app.module.ts:<syntaxhighlight lang="typescript">