Issue
I was working on Angular2 project where I have a folder called layout where I split common layouts of certain pages into 3 other components(3 folders-header,sidebar, and footer). I have an anchor tag(...) on my header. Upon hitting on it I need to extend the header upto the left end of screen and at the same time sidebar need to be hidden. On hitting the anchor tag again both should came into actual position(toggling). I tried like [ngClass]="{'hide-sidebar' : flags}" class="fix-header"...
where flags is a boolean variable and toggles it's value on hitting anchor tag. I stored the state of this variable in localStorage so that it can be accessed on sidebar, another component. but this helped me to extend header to left end of screen and sidebar remain unchanged.
I think there can be another logic for achieving both in same hit on anchor tag(button).
Solution
Communication using @input and @Output
if the components are in parent-child relationship e.g. navbar-component is in header-component template or header-component is in navbar-component template, then you can use angular @Input
@Output
decorators to pass data between components
More on @Input
and @Output
and Component interaction in angular documentation here
Communication Using Service
if these components are not directly related then, you can use a service
to communicate between these components, where one component pushes data to service and the other gets it from the service,
More on communication among components using a service is explained in Angular documentation here
Update: Siblings with Same Parent Communication Using @Input()
@Output()
If you don't want to use service for communication and keep things less complex, you can use the common parent for sibling components.
Lets suppose the variable which you want to toggle resides in header component,
now you create an EventEmitter
in your header.component.ts like this
@Output() onToggle = new EventEmitter();
then in the function where you toggle the variable, you can write this,
toggle() {
if(this.flags === true) {
this.flags = false;
}else {
this.flags = true;
}
this.onToggle.emit(this.flags);
}
then in your parent template, you'll bind the function to the header which will be executed when the above event is triggered, so in your parent template you can write this,
<app-header (onToggle)="notifySidebar($event)"></app-header>
And the notifySidebar
method in you parent.component.ts will be like this,
notifySidebar(flags) {
console.log(flags);
this.flags = flags;
}
You need to define the above flags
property (you can choose any name) in parent.component.ts,
Now the final part, you need to tell the sidebar.component.ts that you flag property has changed, so you will define @Input()
property in your sidebar.component.ts
@Input() flags: boolean;
and a method ngOnChanges
(keep in mind to use ngOnChanges
you need to implement OnChanges
interface on your sidebar.component.ts more on OnChanges
here )
ngOnChanges() {
if(this.flags){
//do whatever you want to do with flags
}
}
and the flags
property will be passed to the sidebar from parent like this
<app-sidebar [flags]="flags"></app-sidebar>
Answered By - asimhashmi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.