I have a div inside a component (child.html) and I would trigger a click event to the another (parent.html) to turn a boolean from false to true. I know it is possible using html as <child-component [Event]></child-component>
but the child have to be invisible to the user.
Is it possible to add CSS to from the app.css to make it invisible? I am not sure if it is possible to make it in Angular, here is what I tried:
child.html:
<div class="notif-filter" (click)="hideNotif(event)"> </div>
child.ts:
public hideNotif(event) {
console.log(event, 'hideNotif is fired !!');
this.hideMe = true;
// this.feedIsVisible = false;
}
parent.html: (this one should be invisible)
<child-component></child-component>
parent.css:
app-child: { display: none }
parent.ts:
@input event: Event (comming from the child)
lockScreen(): void {
this.screenLocked = true;
this.feedIsVisible = false; ==> *This should turn to true depending on
the click event in the child.html*
this.nav.setRoot('ConnexionPage').then();
}
First read about Angular Component Interaction .
Then you will know that there are 4 main ways to communicate between components.
In your scenario you can use any method you want.
look at this example
child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
public show: boolean;
@Output()
public childButtonClick = new EventEmitter<boolean>();
constructor() {
this.show = true;
}
public onClick(): void {
this.show = !this.show;
this.childButtonClick.emit(this.show);
}
}
child.component.html
<button (click)="onClick()">Child button</button>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public show: boolean;
constructor() {
this.show = true;
}
public onChildButtonClick(value): void {
this.show = value;
}
}
app.component.html
<app-child (childButtonClick)="onChildButtonClick($event)"></app-child>
<div *ngIf="show">
This will be hidden when you click the button
And I'm using ngIf directive
</div>
<br>
<br>
<div [ngClass]="{'hide-me': !show}">
This will be hidden when you click the button
And I'm using ngClass directive
</div>
<br>
<div>
show value: {{show}}
</div>
app.component.css
.hide-me {
display: none
}
In here I've used the Parent listens for child event method. And I've created a stackblitz for this.
HTML:
hello.componemt.html
<button (click)="onClick()">hello button</button>
app.component.html
<hello (childClick)="onChildButtonClick($event)"></hello>
{{show}}
TS:
hello.component.ts:
import { Component,Input, Output, EventEmitter, } from '@angular/core';
@Component({
selector: 'hello',
templateUrl: './hello.component.html',
styleUrls: [ './app.component.css' ]
})
export class HelloComponent {
public show: boolean;
@Output()
public childClick = new EventEmitter<boolean>();
constructor() {
this.show = true;
}
public onClick(): void {
this.show = !this.show;
this.childClick.emit(this.show);
}
}
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 6';
public show: boolean;
constructor() {
this.show = true;
}
public onChildButtonClick(value): void {
this.show = value;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.