NishuGoel

<div class = 'jumbotron'>
    <button class = 'btn btn-info'> Hey </button>
    <h1>Welcome to Angular</h1>
    <table class = 'table'>
        <tr>
            <td> With bootstrap</td>
        </tr>
    </table>
</div>

NishuGoel

<div>
    <button> Hey </button>
    <h1>Welcome to Angular</h1>
    <table>
        <tr>
            <td> No bootstrap</td>
        </tr>
    </table>
</div>

NishuGoel

loginForm: FormGroup;
ngOnInit() 
	this.loginForm = new FormGroup({
		email: new FormControl(null),
		password: new FormControl(null),
		age: new FormControl(null)
	});
}

NishuGoel

<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
<br />
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" /> <br />
 <input formControlName='age' type="number" class="form-control" placeholder="Enter Age" />
<br />
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
 </form> 

NishuGoel

ngOnInit() {
 this.loginForm = new FormGroup({
      email: new FormControl(null, [Validators.required]),
      password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),
     class: new FormControl(null)
     });
}

NishuGoel

<input formControlName='Class' type="number" class="form-control" placeholder="Enter Class" />
 <div class="alert  alert-danger" *ngIf="loginForm.get('class').dirty && loginForm.get('class').errors && loginForm.get(‘class’).errors.classRange ">
     Class should be in between 1 to 12 
 </div>

NishuGoel

<input type = "text placeholder = "What is your name?" #name>
<button (click) = display(name)>What is the name? </button>

NishuGoel

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent { 
    display(name: HTMLInputElement){
      console.log(name.value);
    }

NishuGoel

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

@Injectable()
export class ProductService{
  getProducts(){
  return;
  }
}

NishuGoel

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

@Injectable({
  providedIn: 'root'
})
export class ProductService{
  getProducts(){}
}