Slip solution angular framework 13(FSD-II)

Write an Angular script to print details of bank (bank name, MICR code, IFC

code, address etc.) in tabular form using ng-repeat.

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

interface Bank {

name: string;

micr: string;

ifsc: string;

address: string;

}

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

banks: Bank[] = [

{

name: 'HDFC',

micr: '123456789',

ifsc: 'FNB0001234',

address: 'Chinchwad'

},

{

name: 'SBI',

micr: '987654321',

ifsc: 'PTB0009876',

address: 'Pimpri'

},

{

name: 'TJSB',

micr: '987654323',

ifsc: 'TJB0009876',

address: 'Pune'

},

];

}

<div>

<h2>Bank Details</h2>

<table>

<thead>

<tr>

<th>Bank Name</th>

<th>MICR Code</th>

<th>IFSC Code</th>

<th>Address</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let bank of banks">

<td>{{ bank.name }}</td>

<td>{{ bank.micr }}</td>

<td>{{ bank.ifsc }}</td>

<td>{{ bank.address }}</td>

</tr>

</tbody>

</table>

</div>


Add formsModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


output-

ng serve -o



2) Write an Angular to display list of games stored in an array on click of

button using ng-click and also demonstrate ng-init, ng-bind directive of AngularJS.

app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

title = 'Angular 13 Game List';

games: string[] = [];

showGamesList = false;

constructor() {}

ngOnInit(): void {

// Initialize any default values here

this.games = []; // Empty by default

}

showGames(): void {

this.games = [

'Minecraft',

'Basketball',

'Football',

'kho-kho',

'Cricket'

];

this.showGamesList = true;

}

}

app.component.html

<h1>{{ title }}</h1>

<button (click)="showGames()">Show Games</button>

<ul *ngIf="showGamesList">

<li *ngFor="let game of games">{{ game }}</li>

</ul>


Output-

ng serve -o



3)Find a company with a workforce greater than 30 in the array (use find by

id method)

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

interface Company {

id: number;

name: string;

workforce: number;

}

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

companies: Company[] = [ { id: 1, name: 'Alpha Corp', workforce: 25 },

{ id: 2, name: 'Beta Ltd', workforce: 45 },

{ id: 3, name: 'Gamma LLC', workforce: 30 }

];

foundCompany?: Company;

findCompany(): void {

this.foundCompany = this.companies.find(c => c.workforce > 30);

}

}

app.component.html

<div class="container">

<h2>Company Search by Workforce</h2>

<button (click)="findCompany()">

Find Company with Workforce > 30

</button>

<div *ngIf="foundCompany; else notFound">

<h3>Found Company:</h3>

<p><strong>ID:</strong> {{ foundCompany.id }}</p>

<p><strong>Name:</strong> {{ foundCompany.name }}</p>

<p><strong>Workforce:</strong> {{ foundCompany.workforce }}</p>

</div>

<ng-template #notFound>

<p>No company found with workforce greater than 30.</p>

</ng-template>

</div>


output- ng serve -o



4)Create a simple Angular component that takes input data and displays it.

ng g c user

user.component.ts

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

@Component({

selector: 'app-user',

templateUrl: './user.component.html',

styleUrls: ['./user.component.css']

})

export class UserComponent implements OnInit {

@Input() userName!: string;

@Input() userEmail!: string;

constructor() { }

ngOnInit(): void {

console.log("Username:", this.userName);

console.log("User Email:", this.userEmail);

}

}

user.component.html

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

@Component({

selector: 'app-user',

templateUrl: './user.component.html',

styleUrls: ['./user.component.css']

})

export class UserComponent implements OnInit {

@Input() userName!: string;

@Input() userEmail!: string;

constructor() { }

ngOnInit(): void {

console.log("Username:", this.userName);

console.log("User Email:", this.userEmail);

}

}

app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'inputcomponent';

name = 'Soham kale';

email = 'soham.kale@example.com';

}

app.component.html

<h2>{{ title }}</h2>

<!-- Passing data to child component -->

<app-user [userName]="name" [userEmail]="email"></app-user>


output- ng serve -o




Comments

Post a Comment

Popular posts from this blog

Slip 11: Write node js application that transfer a file as an attachment on web and enables browser to prompt the user to download file using express js.

  const express = require ( 'express' ); const path = require ( 'path' ); const app = express (); const PORT = 3000 ; // Route to download file app . get ( '/download' , ( req , res ) => {     res . download ( 'a.txt' , ( err ) => {         if ( err ) {             console . log ( "Error downloading file:" , err );         } else {             console . log ( "File sent successfully" );         }     }); }); // Home app . get ( '/' , ( req , res ) => {     res . send ( '<h2>Click below to download file</h2><a href="/download">Download File</a>' ); }); app . listen ( PORT , () => {     console . log ( `Server running at http://localhost: ${ PORT } ` ); });
Read more

Slip 7 Create a node js file named main.js for event-driven application. There should be a main loop that listens for events, and then triggers a callback function when one of those events is detected.

 // import event module var events = require('events'); // create an eventEmitter object var eventEmitter = new events.EventEmitter(); // create an event handler var connectHandler = function (s) {    console.log('Its', s); }; // Bind the data_received event eventEmitter.on('data_received', function (name) {    console.log(name, "Understood event -Driven"); }); // trigger data_received event eventEmitter.emit('data_received', "FYMSC(CS)"); // Bind the connection event eventEmitter.on('connection', connectHandler); // trigger connection event eventEmitter.emit('connection', "SIMPLE SOLUTION"); console.log("program Ended");
Read more

Slip 1(a) Write an Angular 13 application addition of two numbers using ng-init, ng-model & ng-bind. And also demonstrate ng-show, ng-disabled, ng-click directives on button component.

Image
 a) ng new slip1 b) cd slip1 c) open app.component.ts   import { Component } from '@angular/core' ; @ Component ({   selector : 'app-root' ,   templateUrl : './app.component.html' ,   styleUrls : [ './app.component.css' ] }) export class AppComponent {   num1 : number = 0 ;   num2 : number = 0 ;   result : number = 0 ;   disableButton : boolean = false ;   showResult : boolean = false ;   add () : void {     this . result = this . num1 + this . num2 ;     this . disableButton = true ;   // Disable the button after calculation     this . showResult = true ;       // Show the computed result   } }                                                                ...
Read more