How to bind the component selector to display dynamic string data in Angular 4

Question

I am using angular 4 in my application and I wanted to use a reusable component which helps me to display some information dynamically based on the user. So as a first step I have created component!.

import { Component, OnInit, Input } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'pageInfo',
  templateUrl: './pageInfo.component.html',
  styleUrls: ['./pageInfo.component.scss']
})
export class PageInfoComponent implements OnInit {


  public info: string;
  public manipulatedString: string;

  constructor() {
  }

  ngOnInit() {
  }

  stringManipulation(){

    this.manipulatedString = "" // Some sort of manipulation using this.info string value

  }
}

Now I will start using <pageInfo></pageInfo> tag in some other html pages, while using I want to pass some hard coded string value into PageInfoComponent class through Component selector. After getting string value PageInfoComponent class will manipulate it and add some sort of styles and the result will be displayed.

pageInfo.component.html

<div>{{manipulatedString}}</div>

So how can I pass string value from component selector to it's class, so that I can display manipulated string with reusable component.

score 2 · Accepted Answer · answered Aug 16 '17 at 13:37

2

You can add

<ng-content></ng-content>

to the template of your pageInfo component

or you can pass the string to an input of your pageInfo component

@Input() manipulatedString:string;

and the component displays the string itself

<span [innerHTML]="manipulatedString"></span>

For this you need to use the DomSanitizer to indicate to Angular that it's safe to add HTML tags from this string (your responsibility that it doesn't contain harmful HTML) and use it like

<pageInfo [content]="manipulatedString"></pageInfo>

You would need to add <div></div> in TypeScript, or

<pageInfo [content]="'<div>'+manipulatedString+'</div>'"></pageInfo>

answered Aug 16 '17 at 13:37

Günter Zöchbauer

623,577
216
2,003
1,567

1

@Zöchbauer Thanks for your answer, it is working fine :). – Rajesh Hatwar Aug 17 '17 at 04:43
I think in selector while passing string value it is not necessary to keep inside
tag, single cots are more than enough. – Rajesh Hatwar Aug 17 '17 at 04:50
I might have misunderstood what exactly you try to accomplish. If you don't want to add the `` component, then you don't need to, I used it because you mentioned it in your question. – Günter Zöchbauer Aug 17 '17 at 05:06
Yes you are right, but when I tried without
still it is working fine – Rajesh Hatwar Aug 17 '17 at 05:30
Can you please add the code to your question that shows what you tried? – Günter Zöchbauer Aug 17 '17 at 06:48
Now code is not different from the above posted code, I suppose to use `@Input()` and single coted string message inside `` tag. If I use any HTML tags with the string value, then I need to sanitize before it reflect on UI. – Rajesh Hatwar Aug 17 '17 at 07:05
Thatßs right, otherwise HTML us stripped from the string. See also https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax – Günter Zöchbauer Aug 17 '17 at 07:07
Small question, Even while passing string value I need to pass HTML content(s), so `DomSanitizer` is good enough to sanitize for the most of the HTML content? or should I also use ` SecurityContext, SafeHtml ` (Sorry I don't no much on this) – Rajesh Hatwar Aug 17 '17 at 07:13
`SafeHtml` pipe is just for convenience, DomSanitizer is enough – Günter Zöchbauer Aug 17 '17 at 07:22

Vikhyath Maiya · Answer 2 · 2017-08-17T04:48:03.647

You can use @Input decorator for communication between parent and the child.You can find documentation here .For example

import { Component, OnInit, Input,OnChanges } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'pageInfo',
  templateUrl: './pageInfo.component.html',
  styleUrls: ['./pageInfo.component.scss']
})
export class PageInfoComponent implements OnInit,OnChanges{


  public info: string;
  public manipulatedString: string;
  @Input() private stringToManipulate:string;

  constructor() {
  }

ngOnChanges (){
     this.manipulatedString=this.stringToManipulate;

 }

  ngOnInit() {
  }

  stringManipulation(){

    this.manipulatedString = "" // Some sort of manipulation using this.info string value

  }
}

and in the template you can display using

<div>{{manipulatedString}}</div>

and in the parent component you can use

<pageInfo [stringToManipulate]="variable name/'the value of the string you want to send' "></pageInfo>

small correction, @ tag if we want to pass any string value then it must be inside the single cote I.e. — Rajesh Hatwar, Aug 17 '17 at 04:46

score 1 · Answer 3 · answered Aug 16 '17 at 13:59

Günter Zöchbauer answer is amazing and you can follow that. Another way I follow is

call the component from html by binding string to a input variable of the component as below.

<pageInfo [manipulatedString]="'the hard coded string value'"></pageInfo>

you can get that in your component by declaring it as a input variable

@Input() manipulatedString:string;

And then you can simply display your string after manipulating in your component class

<div>{{manipulatedString}}</div>

How to bind the component selector to display dynamic string data in Angular 4

3 Answers3