FSD -II - Practical Assignment -IV

 Implement a service for communication between sibling components - Create a service

named `DataService` with methods to send and receive data. - Use this service to enable

communication between two sibling components. - Demonstrate passing data from one

component to another without using @Input() or @Output().




1. ng generate service data

2.

src/app/data.service.ts

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

import { BehaviorSubject } from 'rxjs';


@Injectable({

providedIn: 'root',

})

export class DataService {

private dataSubject = new BehaviorSubject<any>(null); // Default value can be null or any

initial value

data$ = this.dataSubject.asObservable();


// Method to send data

sendData(data: any) {

this.dataSubject.next(data);

}

}


3. Create Sibling Components

ng generate component component-a

ng generate component component-b


4. Component A (Sender)

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

import { DataService } from '../data.service';


@Component({

selector: 'app-component-a',

templateUrl: './component-a.component.html',

styleUrls: ['./component-a.component.css']

})

export class ComponentAComponent{


message: string = '';

constructor(private dataService: DataService) {}

sendMessage() {

this.dataService.sendData(this.message);

}

}


5. component-a.component.html

<div>

<h2>Component A</h2>

<input [(ngModel)]="message" placeholder="Enter message">

<button (click)="sendMessage()">Send to Component B</button>

</div>

6.component-b.component.ts

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

import { DataService } from '../data.service';

@Component({

selector: 'app-component-b',

templateUrl: './component-b.component.html',

styleUrls: ['./component-b.component.css']

})

export class ComponentBComponent implements OnInit {


receivedMessage: string = '';

constructor(private dataService: DataService) {}

ngOnInit() {

this.dataService.data$.subscribe((data) => {

this.receivedMessage = data;

});

}

}

7. component-b.component.html

<div>

<h2>Component B</h2>

<p>Received Message: {{ receivedMessage }}</p>

</div>


8.app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { ComponentAComponent } from './component-a/component-a.component';

import { ComponentBComponent } from './component-b/component-b.component';

import { FormsModule } from '@angular/forms'

import {DataService } from './data.service';

@NgModule({

declarations: [

AppComponent,

ComponentAComponent,

ComponentBComponent

],

imports: [

BrowserModule,

AppRoutingModule,FormsModule

],

providers: [DataService],

bootstrap: [AppComponent]

})


export class AppModule { }

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