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>
Related
Before switching on angular I worked in javascript. I want to change value of css properties of certain elements in typescript. But I found that you can not change it like in javascript: name.style.color='red'.
With javascript I would write:
HTML:
<div id="blue" style="background-color:red;">
Hello
</div>
<button id="it">Press</button>
JS:
let blue=document.getElementById("blue");
let it=document.getElementById("it");
it.onclick= ()=> blue.style.backgroundColor="blue";
But in typescript it doesn't work:
HTML:
<div id="blue" style="background-color:red;">
Hello
</div>
<button (click)="switch()">Press</button>
TS:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my_app_2';
blue=document.getElementById("blue");
switch() {
this.blue.style.backgroundColor="blue";
}
}
I found one soultion, but I would like to know is there any more 'natural' way to do it like in javascript. Here code of that solution:
HTML:
<div id="blue" [ngStyle]="this.clicked==true?{'background-color':'blue'}:{'background-color':'red'}">
Hello
</div>
<button (click)="switch()">Press</button>
TS:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my_app_2';
clicked=false;
switch() {
this.clicked=!this.clicked;
}
}
Use Renderer2's function setStyle.
In Angular, avoid using document, instead you should use #ViewChild.
Example:
<!-- your-component.html -->
<div #blue></div>
// your-component.ts
export class MyComponent {
#ViewChild('blue') blue: ElementRef;
// Inject Renderer2 in your constructor
constructor(private renderer: Renderer2) { }
// Use it in your function
switch () {
this.renderer.setStyle(this.blue.nativeElement, 'background-color', 'blue');
}
}
You can use ngClass while setting the value to a function or property
In controller:
import { Component } from '#angular/core';
#Component({
// ...
})
export class AppComponent {
clicked = false;
switch() {
this.clicked = !this.clicked;
}
getBackgroundColor(): string {
if (this.clicked) {
return 'blue';
}
return 'red';
}
}
In template:
<div id="blue" [ngStyle]="{'background-color': getBackgroundColor()}">
Hello
</div>
<button (click)="switch()">Press</button>
I have this situation: A parent component structured in this way:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
with this html (parent has an ng-content):
<div>
<ng-content></ng-content>
<button>Click to say Hello!!!</button>
</div>
and a child component like this:
import { Component, OnInit } from "#angular/core";
#Component({
selector: "app-child",
templateUrl: "./child.component.html",
styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
onSubmit() {
alert("hello");
}
constructor() {}
ngOnInit() {}
}
with this html:
<div>I'm child component</div>
From the parent component I want to click inside button to invoke onSubmit child function...is this possible?
<app-parent>
<app-child>
</app-child>
</app-parent>
This is a sample; I'm creating a modal that has default buttons: "CANCEL" and "SUCCESS". On the success button I need to invoke one function declared into the childrenComponent.
This is the stackblitz example: https://stackblitz.com/edit/angular-ivy-vuctg4
You can access like that
app.component.html
<hello name="{{ name }}"></hello>
<app-parent (clickActionCB)="clickActionCB($event)">
<app-child></app-child>
</app-parent>
app.component.ts
import { Component, VERSION, ViewChild } from "#angular/core";
import { ChildComponent } from "./child/child.component";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
#ViewChild(ChildComponent) childRef: ChildComponent;
clickActionCB(eventData) {
this.childRef.onSubmit() ;
}
}
parent.component.ts
import { Component, EventEmitter, OnInit, Output } from "#angular/core";
#Component({
selector: "app-parent",
templateUrl: "./parent.component.html",
styleUrls: ["./parent.component.css"]
})
export class ParentComponent implements OnInit {
constructor() {}
ngOnInit() {}
#Output() clickActionCB = new EventEmitter<string>();
clickAction() {
this.clickActionCB.emit();
}
}
parent.component.html
<div>
<ng-content></ng-content>
<button (click)="clickAction()">Click to say Hello!!!</button>
</div>
Live stackblitz URL
child.component.ts
import { Component, OnInit } from "#angular/core";
#Component({
selector: "app-child",
template: `
<div>I'm child component</div>
`
})
export class ChildComponent implements OnInit {
onSubmit() {
alert("hello");
}
constructor() {}
ngOnInit() {}
}
parent.component.ts
import { ChildComponent } from "../child/child.component";
#Component({
selector: "app-parent",
template: `
<div>
<ng-content></ng-content>
<button (click)="onClick()">Click to say Hello!!!</button>
</div>
`
})
export class ParentComponent implements OnInit {
#ContentChild(ChildComponent) childRef: ChildComponent;
constructor() {}
ngOnInit() {}
onClick() {
this.childRef.onSubmit();
}
}
https://stackblitz.com/edit/angular-ivy-mteusj?file=src%2Fapp%2Fparent%2Fparent.component.ts
This is my app.component.html source code:
<split-flap></split-flap>
<button (click)="flip('+')">+</button><button (click)="flip('-')">-</button>
This is my app.component.ts source code:
import { Component } from '#angular/core';
import { SplitFlapComponent } from './split-flap/split-flap.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers:[SplitFlapComponent]
})
export class AppComponent {
constructor(private splitFlapComponent: SplitFlapComponent)
{
}
flip(flag)
{
console.log(flag);
this.splitFlapComponent.title=flag;
}
}
This is my split-flap.component.ts:
import { Component, OnInit, Input, Output } from '#angular/core';
#Component({
selector: 'split-flap',
templateUrl: './split-flap.component.html',
styleUrls: ['./split-flap.component.css']
})
export class SplitFlapComponent implements OnInit {
title: string;
constructor() {
this.title = 'split-flap works1!';
}
ngOnInit() {
}
}
This is my split-flap.component.html:
<p>{{title}}</p>
My app.component.html has two buttons, both of them pass a sign to split-flap.component, would you tell me how can I the update split-flap.component.html content? Because most of the examples for input box only, I cannot find an example for <p>.
Try like this:
Solution 1 : #Input()
app.component.html
<split-flap [title]="title"></split-flap>
app.component.ts
title: string;
constructor() {
this.title = 'split-flap works1!';
}
flip(flag)
{
console.log(flag);
this.title=flag;
}
split-flap.component.ts:
#Input() title: string
Solution 2 : ViewChild()
app.component.html
<split-flap #child ></split-flap>
app.component.ts
#ViewChild('child') child: SplitFlapComponent ;
flip(flag)
{
console.log(flag);
this.child.title=flag;
}
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');
}
}
}
I'm using a service to dynamically change the content in my header depending on the page I'm on, however when I put HTML in my component it doesn't render in the browser (see example below)
home.component.ts
import { Component, OnInit } from '#angular/core';
import { HeaderTitleService } from '../../services/headerTitle.service';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(
private headerTitleService: HeaderTitleService
) { }
ngOnInit() {
this.headerTitleService.setTitle(`
We strive to create things
<br> that are engaging, progressive
<br> & above all
<span class="highlight">
<em>innovative.</em>
</span>
`);
}
}
header.component.ts
import { Component, OnInit } from '#angular/core';
import { HeaderTitleService } from '../../../services/headerTitle.service'
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
title: any;
constructor(
private headerTitleService: HeaderTitleService
) { }
ngOnInit() {
this.headerTitleService.title.subscribe(updatedTitle => {
this.title = updatedTitle;
});
}
}
header.component.html
<h1>{{title}}</h1>
so Im trying to set the title to be a string that has html tags in it that I want to be rendered but what happens is the whole thing comes out as a string instead of how it would look like it I had put it in my home.component.html.
Is there a way I can do this??
You can set the [innerHtml] property
<h1 [innerHtml]="title"></h1>
Example