pass checkbox checked value from Root to Child Component

Amit Kumar Singh

8y2.6kAngular

Hello,

how to pass clicked checkbox value from root to child component.

I have sidebar menu in app component and i need to pass value of selected checbox to child component.

Thanks in advance!!!

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bhairab Dutt8y ago
Hi ,

There are 2 scenerios :

If one is Parent component and other as child component then you can pass the value to child using @input

and if component has not the relation ship of parent and child then you can use angular service for sharing the data .

I think , According to your question you can use the @input deccorator .

Hope its helps to you.
Thanks
0

Jitendra Kumar8y ago

import {Component,EventEmitter} from "@angular/core"; import {User} from "User.Model";  @Component({    selector: 'component-A',    outputs :["selectedUser"],    templateUrl:'' })  export class AppComponent{  selectedUser : new EventEmitter;  public rowSelected:boolean = true;  constructor(public users : User ) {}  getRowData(rowIndex: number, rowData: any): void {          this.rowSelected = $(rowIndex).hasClass('selected');         console.log(rowData);         this.users= rowData.FirstName;         this.selectedUser.emit(this.users);     } }

Component B Html

Component B.ts

// skipping some code export class BComponent{      PrintUserInfo(user :User): void {        console.log("Name :" + user.Name);    } }

Amit Kumar Singh8y ago
Hello
I have different component
1.AppComponent
2.RoomComponent

I have to pass value from AppComponet to RoomComponent.

Thanks
0

Jitendra Kumar8y ago

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

@Component({

    selector: 'appchild',

    template: `Hi {greetMessage}
`

})

export class AppChildComponent {

    greetMessage: string = "I am Child";

}
 

 
 

import {Component } from '@angular/core';
import {AppChildComponent} from './appchild.component';
@Component({
	selector: 'my-app',
	template: `Hello {message} 
	`,
})
export class AppComponent {
	message : string = "I am Parent";
}
Passing Data From Parent Component to Child Component
 
import { Component,Input,OnInit } from '@angular/core';
@Component({
    selector: 'appchild',
    template: `Hi {{greetMessage}}`
})
export class AppChildComponent  implements OnInit{
    @Input() greetMessage: string ;
        constructor(){
        }   


import {Component } from '@angular/core';
import {AppChildComponent} from './appchild.component';
@Component({
    selector: 'my-app',
    template: `Hello {{message}} 
 
  
  `,
})
export class AppComponent  { 
 
        message : string = "I am Parent";
        childmessage : string = "I am passed from Parent to child component"
    }

        ngOnInit(){
        }
    }