I have a parent component:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
funcBoo():void{
alert("boo");
//return false - didn't work
}
}
and the child component:
#Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
#Output() onArrowClick: EventEmitter<any> = new EventEmitter();
arrowClicked(){
this.onArrowClick.emit(null);
alert('arrowClicked');
}
}
}
in the html of the parent I use the child component
with the event 'onArrowClick' like this:
<app-child (onArrowClick)="funcBoo()"></app-child >
I want to be able to stop the function arrowClicked() in the child component from keep running(the 'arrowClicked' alert won't appear), in the parent component (it's for a user which won't have access to the child component)
I tried simple return false and it didn't work.
Can you help me to understand it?
Thank you
I would suggest you to add an #Input option in order to disable emission when you want it. An example below with a disabled option :
<app-child [disabled]="parentVariableHere" (onArrowClick)="funcBoo()"></app-child >
And then your child component would be like :
#Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
#Input() disabled: Boolean = false;
#Output() onArrowClick: EventEmitter<any> = new EventEmitter();
arrowClicked(){
if(!this.disabled) {
this.onArrowClick.emit(null);
alert('arrowClicked');
}
}
}
Related
Hi i am new to angular
this is my angular component
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
user = ""
constructor() { }
ngOnInit(): void {
}
}
Is there a way that I can execute a block of code whenever this user variable changes?
yes you can set condition on user or if the user is change from html then you can call that method on (change)="methodName()"
I have tried to the event using eventEmitter but in somehow, the event is not being pass.
Here is the child component where I try to pass the object with eventEmitter
import { Component, OnInit,Input,Output,EventEmitter } from '#angular/core';
#Component({
selector: 'app-favorite',
templateUrl: './favorite.component.html',
styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
#Input('isFavorite') isFavorite?: boolean
#Output() change = new EventEmitter();
constructor() { }
ngOnInit(): void {
}
onClick(){
this.isFavorite = !this.isFavorite
console.log(this.isFavorite)
this.change.emit({newValue: this.isFavorite});
}
}
Here is my template of my Child component:
<p>favorite works!</p>
<button (click)=onClick()>click</button>
Here is the parent component where I want to pass my event to:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-ly';
post = {
title: "Title",
isFavorite:false
}
onFavoriteChange(isFavorite:any){
console.log("Favourite change",isFavorite);
console.log(isFavorite)
}
}
Here is the template of my parent component:
<app-favorite [isFavorite]="post.isFavorite" (change)="onFavoriteChange($event)"></app-favorite>
I try to the print the event that I pass from my child component into the console and here is what I got:
true
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
false
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
true
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
false
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
So I try to communicate between components with ngAfterViewInit.
And I want to use the property
participant: ParticipantInfoDTO;
also using in other component. So I try it like this
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss'],
template: 'Example: {{participant}}<app-echeq-selector></app-echeq-selector>'
})
export class DetailComponent implements OnInit, AfterViewInit {
#ViewChild(EcheqSelectorComponent) echeqReference: ParticipantInfoDTO;
participant: ParticipantInfoDTO;
constructor(private dialog: MatDialog, route: ActivatedRoute) {
this.participant = route.snapshot.data['participant'];
}
ngOnInit() {
}
ngAfterViewInit(): void {
this.participant = this.echeqReference;
}
}
And in child component(EcheqSelectorComponent) I want it using like this:
<p> selected id:{{participant}} </p>
But I get an error on this line:
#Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss'],
template: 'Example: {{participant}}<app-echeq-selector></app-echeq-selector>'
})
saying:
Component 'DetailComponent' must not have both template and
templateUrlng(0)
Thank you
Remove template property in your component decorator.
In detail.component.html, add all the elements you want so that your html file looks like this:
Example: {{participant}}<app-echeq-selector></app-echeq-selector>
If you want to pass a property to app-echeq-selector component then you can use property binding like this:
<app-echeq-selector [participant]="participant"></app-echeq-selector>
In echeq component.ts:
export class echeq... {
#Input() participant;
// you can use this participant property as you want now.
}
I have created a component called Parent and Child. I want to display all the UI of ChildComponent to my ParentComponent.
child.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
testContent = 'child component content...';
constructor() { }
ngOnInit() {
}
}
child.component.html
<p>{{testContent}}</p>
parent.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss'],
directives: [ChildComponent]
})
export class AdminComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
parent.component.html
<div>
Lorem ipsum
<app-child></app-child>
</div>
I want to display the contents of child component inside parent component. However, I am encountering an error in Angular 4
"Object literal may only specify known properties, and 'directives'
does not exist in type 'Component'."
Do you have any idea what is the alternative property to add child component?
Remove directives from the parent component and add the child component to the module declarations array where the parent component lives.
Directives and pipes in #component are deprecated since angular RC6. Just remove it from the component.
#Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss']
})
I am using Angular 4 and eventEmitter to change a class name.
The class css is:
.paintRed {
background-color: red;
}
Now for the Angular part:
I have a button component:
button.compoment.ts:
import { Component, OnInit, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
#Output() outputEvent: EventEmitter<any> = new EventEmitter();
constructor() { }
ngOnInit() {}
sendOutEvent() {
this.outputEvent.emit('paintRed');
}
}
button.component.html
<p (click)="sendOutEvent()">Click to Emit</p>
Finally on my app.component.ts I have:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
handleEvent(value) {
console.log(value);
document.getElementById('elementId').classList.add(value);
}
}
and my app.component.html looks like this:
<div id="elementId">
<app-button (outputEvent)="handleEvent($event)"></app-button>
</div>
The above will successfully add the class "paintRed" to elementId but what I want to do is this:
<div ngClass="myClass">
<app-button (outputEvent)="handleEvent($event)"></app-button>
</div>
Basically I want to use ngClass to change the value sent by handleEvent($event) ...
How can I do that?
In your app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
myClass = '';
handleEvent(value) {
console.log(value);
myClass = value;
}
}
And your html:
<div [ngClass]="myClass">
<app-button (outputEvent)="handleEvent($event)"></app-button>
</div>