1

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.

Improve this question

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

@Zöchbauer Thanks for your answer, it is working fine :).
I think in <pageInfo/> selector while passing string value it is not necessary to keep inside <div/> tag, single cots are more than enough.
I might have misunderstood what exactly you try to accomplish. If you don't want to add the <pageInfo> component, then you don't need to, I used it because you mentioned it in your question.
Yes you are right, but when I tried without <div/> still it is working fine
Can you please add the code to your question that shows what you tried?
|
1

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>
Improve this answer

Comments

1

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>
Improve this answer

1 Comment

small correction, @ <pageInfo> tag if we want to pass any string value then it must be inside the single cote I.e. <pageInfo [stringToManipulate]=" ' Some text ' "></pageInfo>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.