<form class="container">
<div class="form-group">
<input type="number" class="form-control" placeholder="Enter value " #value1>
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Enter value" #value2>
</div>
<button type="submit" class="btn btn-primary" (click)="btnMax(value1,value2)">Max</button>
<button type="submit" class="btn btn-primary"(click)="btnMin(value1,value2)">Min</button>
</form>
<div class="text-danger">
Max:{{result}}
</div>
<div>
Comparing :{{compared}}
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Enter value " #value1>
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Enter value" #value2>
</div>
<button type="submit" class="btn btn-primary" (click)="btnMax(value1,value2)">Max</button>
<button type="submit" class="btn btn-primary"(click)="btnMin(value1,value2)">Min</button>
</form>
<div class="text-danger">
Max:{{result}}
</div>
<div>
Comparing :{{compared}}
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-compare-value',
templateUrl: './compare-value.component.html',
styleUrls: ['./compare-value.component.css']
})
export class CompareValueComponent implements OnInit {
// declare variable
constructor() { }
ngOnInit() {
}
result:number;
compared:number;
value1:number;
value2:number;
btnMax(v1:HTMLInputElement,v2:HTMLInputElement){
//console.log(v1.value);
//console.log(v2.value);
this.value1=Number(v1.value);
this.value2=Number(v2.value);
this.result=this.value1+this.value2;
if(this.value1>=this.value2){
this.compared=Number(v1.value);
}else
this.compared=Number(v2.value);
}
btnMin(v1:HTMLInputElement,v2:HTMLInputElement){
this.value1=Number(v1.value);
this.value2=Number(v2.value);
if(this.value1<=this.value2){
this.compared=Number(this.value1);
}else if(this.value2<=this.value1){
this.compared=Number(this.value2)
}
}
}
@Component({
selector: 'app-compare-value',
templateUrl: './compare-value.component.html',
styleUrls: ['./compare-value.component.css']
})
export class CompareValueComponent implements OnInit {
// declare variable
constructor() { }
ngOnInit() {
}
result:number;
compared:number;
value1:number;
value2:number;
btnMax(v1:HTMLInputElement,v2:HTMLInputElement){
//console.log(v1.value);
//console.log(v2.value);
this.value1=Number(v1.value);
this.value2=Number(v2.value);
this.result=this.value1+this.value2;
if(this.value1>=this.value2){
this.compared=Number(v1.value);
}else
this.compared=Number(v2.value);
}
btnMin(v1:HTMLInputElement,v2:HTMLInputElement){
this.value1=Number(v1.value);
this.value2=Number(v2.value);
if(this.value1<=this.value2){
this.compared=Number(this.value1);
}else if(this.value2<=this.value1){
this.compared=Number(this.value2)
}
}
}
Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
<div class="container">
<form>
<div class="form-group">
<label for="username">Email address</label>
<input [(ngModel)]='listfilter' name='valid' type="email" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input [(ngModel)]='listfilters' name='valid' type="password" class="form-control" id="password" placeholder="Password">
</div>
<button [disabled]='!listfilter||!listfilters' (click)='onClick(listfilter)' type="submit" class="btn btn-primary">Submit</button>
<div class="form-group">
<label class="forgetPassword" id="forgetPassword">For got your password?</label>
<a [routerLink]="['/requestreset']" href="#" class="forgetPassword" for="forgetPassword">Request a link to reset it!</a>
</div>
</form>
</div>
<form>
<div class="form-group">
<label for="username">Email address</label>
<input [(ngModel)]='listfilter' name='valid' type="email" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input [(ngModel)]='listfilters' name='valid' type="password" class="form-control" id="password" placeholder="Password">
</div>
<button [disabled]='!listfilter||!listfilters' (click)='onClick(listfilter)' type="submit" class="btn btn-primary">Submit</button>
<div class="form-group">
<label class="forgetPassword" id="forgetPassword">For got your password?</label>
<a [routerLink]="['/requestreset']" href="#" class="forgetPassword" for="forgetPassword">Request a link to reset it!</a>
</div>
</form>
</div>
routerLink="/" វាគឺជាផ្លូវសម្រាប់បង្ហាញនៅលើ URL នៅពេលចុចវានឹងទៅដល់
routerLink="/" routerLinkActive="active" វាគឺជាកន្លែងសម្រាប់ប្រើប្រាស់ style css ដើម្បីបង្ហាញ style
i.e .active{
background-color:red;
}
routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" វាគឺចំនុចដែលធ្វើអោយ routerLink ធ្វើការ true នឹង
មិនដំណើរការពេល false.(lower case and upper case)
routerLink="/" routerLinkActive="active" វាគឺជាកន្លែងសម្រាប់ប្រើប្រាស់ style css ដើម្បីបង្ហាញ style
i.e .active{
background-color:red;
}
routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" វាគឺចំនុចដែលធ្វើអោយ routerLink ធ្វើការ true នឹង
មិនដំណើរការពេល false.(lower case and upper case)