Q Take a number as input in the code.

Print it in alert box on the click

of a button.
app.component.ts file content

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

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent{
title = "CodeSandbox";
num:number=40;
myfunc():void{
alert(this.num)
}
}

app.component.html content

<button (click)="myfunc()">String</button>

app.component.css
No content

Q Take your name as input from user in a text box. And show it on
alert box on the click of a button.
Answer:
app.component.ts file content

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

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
showText(title:string) {
if(title!=="")
{
alert(title);
}
else
{
alert("Fill the name first!!!");
}
}
}

app.component.html content

<div class="jumbotron text-center">

<h3>Display name in alert box On Button Click:</h3>
</div>
<div class="container">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" #titleInput class="form-control">
</div>
<button type="button" (click) = "showText(titleInput.value)" class="btn btn-
primary">Show Button value!</button>
</div>

app.component.css content

Empty file

Q Take a number as input in a text box on browser. On the click of a

button it should display an alert box having half of the number. eg. If
text box input is 10. It will display 5 on alert box.

App.component.ts file content

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

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
showText(n:number) {
if(n=='')
{
alert("Enter a valid number")
}
else
{
alert(n/2);
}
}
}

app.component.css file

div {
text-align: center;
}

app.component.html

<div class="jumbotron text-center">

<h3>Display name in alert box On Button Click:</h3>
</div>
<div class="container">
<div class="form-group">
<label for="usr">Number:</label>
<input type="number" #titleInput class="form-control">
</div>
<button type="button" (click) = "showText(titleInput.value)" class="btn btn-
primary">Show Button value!</button>
</div>

Practice problems in Angular

Q Take a number as input in the code. Check whether the number is an armstrong
number or not. On the click of a button it should generate alert that “The number is
an armstrong number” or “The number is not an armstrong number”.
Q Create your one page CV on angular.