Angular

Install Angular requires NodeJS

npm install -g @angular/cli

# To install specific version
npm install -g @angular/cli@7.0.3

Create and run Angular application

ng new my-app
cd my-app
ng serve

ng Commands

ng new my-app
cd my-app
ng serve
ng serve --live-reload
ng build
ng test
ng e2e
ng generate component welcome # = ng g c welcome

Tests

ng test runs Jasmine tests

Configured at karma.conf.js

Extension for tests: *.spec.ts

ng e2e runs end to end tests with protractor, code at e2e folder

angular.json

Defines angular commands behavior

Components

Template -> *.component.html

CSS -> *.component.css

Code (TypeScript) -> *.component.ts

app.component.ts

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

@Component({
    selector: 'app-root',
    template: './app.component.html',
    styleUrls: ['./app.components.css']
})

export class AppComponent {
    title = 'todo';
}

app.component.html

<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
    <img width="300" alt="Angular Logo" src="data:image"
</div>
 
<router-outlet></router-outlet>

Syntax

import

import {Component, OnInit} from '@angular/core';
import { AppComponent }from '..app.component';

class definition

export class WelcomeComponent implements OnInit {
    message = 'Some welcome message'
    message2 : string = 'Some welcome message with type'

    constructor(){
    }
    ngOnInit(){
        console.log(this.message)
    }
}

Login Component example

from command line:

ng generate component login

login.component.html

<small *ngIf=invalidLogin>{{ errorMessage }}</small>
<div>
  Username: <input type="text" name="username" [(ngModel)]="username">
  Password: <input type="password" name="password" [(ngModel)]="password">
  <button (click)=handleLogin()>Login</button>
</div>

login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username = 'Rafa'
  password = ''
  errorMessage = 'Invalid credentials'
  invalidLogin = false

  constructor() { }

  ngOnInit(): void {
  }

  handleLogin(){
    // console.log(this.username)
    this.invalidLogin = !(this.username === 'Rafa' && this.password === 'abcd');
  }
}

In order to be able to use [(ngModel)]=... you need to add the formsModule to your app.module.ts:

....
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule
    ],
....

Routing

app-routing.module.ts

import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from "./login/login.component";
import {ErrorComponent} from "./error/error.component";

const routes: Routes = [
  { path: '', component: LoginComponent},
  { path: 'login', component: LoginComponent},
  { path: 'welcome', component: LoginComponent},
  { path: '**', component: ErrorComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

routing with parameters

app-routing.module.ts

import { RouterModule, Routes } from '@angular/router';
import {WelcomeComponent} from "./welcome/welcome.component";


const routes: Routes = [
  { path: 'welcome/:name', component: LoginComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

welcome/welcome.component.ts

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from @angular/core;

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})

export class WelcomeComponent implements OnInit {
  message = 'Some Welcome Message'
  name = ''
  
  // ActivatedRoute
  constructor(private route:ActivatedRoute){
  }

  ngOnInit(){
    console.log(this.message)
    name = this.route.snapshot.params['name'];
  }
}

login/login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username = 'Rafa'
  password = ''
  errorMessage = 'Invalid credentials'
  invalidLogin = false

  constructor() { }

  ngOnInit(): void {
  }

  handleLogin(){
    // console.log(this.username)
    this.invalidLogin = !(this.username === 'Rafa' && this.password === 'abcd');

    if ( !this.invalidLogin ) {
      this.router.navigate(['welcome', this.username])
    }

  }
}

Error component

ng g c error