Develop Reference

Problem calling one Angular component from another component

At work, I have run into a problem using Angular. I have this kind of Angular component:
#Component({
selector: 'foo',
templateUrl: 'foo.html'
})
export class FooComponent {
#Input() data: string;
content: string;
ngOnInit() {
this.content = this.data;
}
setValue(data) {
this.content = data;
}
}
This is initialized from my main Angular component in a code block such as this:
this.components = [FooComponent, BarComponent, BazComponent, QuuxComponent];
Now this works so far. But if I try to call the setValue() function with this.components[0].setValue("Hello world!"); I get an error "this.components[0].setValue is not a function."
What is the reason for this and how can I fix it?

This seems like a very very weird way to work with components in angular.
You really don't want to break encapsulation by calling methods inside one component from another component.
I personally haven't seen this kind of component referencing anywhere (and have doubts it is a correct approach).
There is no reason to duplicate the data property in the content.
You can pass values in the template. Or use a service if you don't have direct access to the template.
Here is a very basic example on how to modify data from the parent using a template and #Input.
app.component.ts
import { Component } from "#angular/core";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
message = "I am a message from the parent";
}
app.component.html
<app-child [content]='message'></app-child>
child.component.ts
import { Component, OnInit, Input } from "#angular/core";
#Component({
selector: "app-child",
templateUrl: "./child.component.html",
styleUrls: ["./child.component.css"]
})
export class ChildComponent implements OnInit {
#Input("content") public content: string;
constructor() {}
ngOnInit() {}
}
child.component.html
<p>{{content}}</p>

Why Angular 2+ innerHTML is calling method multiple times in a single statement, How to solve this

I have the template view like this.
<p [innerHTML]="myfunction()"></p>
and, ts file be like
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myfunction(){
alert(name);
return '<div>abcd</div>';
}
}
Its a simple method calling from html to render the html content through innerhtml, here the myfunction() is calling multiple times, and i'm getting multiple alerts, can anyone help me to solve this.
the stackblitz for this is link
thanks in advance

You can use pure pipe to only rerun it if inputs to the pipe have changed:
#Pipe({name: 'functionCaller'})
export class FunctionCallerPipe {
transform(func: any, ...args: any[]): any {
return func(...args);
}
}
And use it like that:
<p [innerHTML]="myfunction| functionCaller : name"></p>
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myfunction(name: string){
alert(name);
return '<div>' + name + '</div>';
}
}

String interpolation in Angular 2 not displaying updated value

I'm trying to learn Angular 2, and I'm running into a weird issue while following this documentation: https://angular.io/docs/ts/latest/guide/user-input.html for binding button clicks to a method on my controller.
I started off with their click event binding example. I created a simple app with the angular cli with ng new test-app and modified it so that it contains a single button that when I click, just adds a message to the page.
I have two components, the app component and the message components shown here:
message.component.html:
<p>{{message}}</p>
message.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-message',
templateUrl: './message.component.html',
styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {
message: string;
constructor() {
this.message = 'some initial message';
}
ngOnInit() {
}
}
app.component.html:
<button (click)="addMessage()">Click</button>
<app-message *ngFor="let message of messages"></app-message>
app.component.ts:
import { Component } from '#angular/core';
import { MessageComponent } from './message/message.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
messages = [];
addMessage() {
const newMessage = new MessageComponent();
newMessage.message = 'Something else entirely';
this.messages.push(newMessage);
}
}
When I run this with ng serve, the button appears as expected, but when I click the button, only the message some initial message appears despite being given a different value by my app controller. While doing a search I found a different way to do the one-way databinding by replacing the string interpolation with: <p [innerText]="message"></p> but the result is the same.
I'm kinda at a loss here as to why it won't display the updated value of Something else entirely.

MessageComponent component should take message as #Input:
export class MessageComponent implements OnInit {
#Input() message: string;
}
AppComponent should send this input to its child like
<app-message *ngFor="let message of messages"
[message]="message.message"></app-message>

how can i use ng2 component like react

I'm new to angular2.in my react project, my component looks like this:
export const DefaultButton = (props: Props) => {
return <button {...props}>{props.children}</button>
}
<DefaultButton>delete</DefaultButton>
ng2:
#Component({
selector: "button-default",
template`<button>{{text}}</button>`,
styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent {
#Input() private text: string
}
can i use ng2 like this?
<button-default>delete</button-default>

The other two answers are close, but I think what you want is in the comment by #yurzui. You don't need an #Input decorated value, if all you're trying to do is pass down the word "delete" like in React. You can just use <ng-content>.
#Component({
selector: "button-default",
template: '
<button>
<ng-content></ng-content>
</button>
',
styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent { }
and
<button-default> Delete </button-default>

If i understood you correctly, you want to have "delete" string inside your component as part of text input variable.
Your ts code is good, just change implementation of component in html:
<button-default [delete]="'delete'"></button-default>

Component
#Component({
selector: "button-default",
template`<button>{{text}}</button>`,
styleUrls: ["./default.css"]
})
export class ButtonDefaultComponent {
#Input("delete") private text: string
}
index
<button-default delete="delete"></button-default>
that is.

Include variable containing html in a template - angular2

For the purposes of an application written in Angular 2, i need to include dynamics html contained in a variable, to a template. You can see the code here:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: '{{name}}',
})
export class AppComponent { name = '<h2>Angular</h2>'; }
However, the result is not what i want :
<h2>Angular</h2>
I would like to know if there is a technique to include this variable for handle the tags as html.
Ps: i try this code :
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: ' <div innerHTML="name" ></div>',
})
export class AppComponent { name = '<h2>Angular</h2>'; }
But it's not really what i want because i don't want that a div(or another tag) encapsulate the <h2>.

If you don't want to encapsulate the h2, you juste have to write:
<h2 [innerHTML]="name"></h2>
crdly.
PS: name is a variable, if you want to test it with a string try that:
<h2 [innerHTML]="'<b>my html code</b>'"></h2>