CODEWITHSUNDEEP
angularangular-components
Sean12
Sean12

Reputation: 847

Passing a string with HTML tags from parent to child component

I'm trying to pass a string from my parent component to my child component. The string contains HTML tags with an HTML entity. This is an example of the template in the parent:

<child-component i18n-componentContent="this is a test|for testing" componentContent='my test<sup>&reg;</sup>not working'></child-component>

on the child component side, I have the following:

    @Input() public componentContent: string;
    
...
        public ngOnInit() {
            console.log(this.componentContent);
        }

However, the value of

this.componentContent

is: "my test"

So, not the whole string is passed into the child component.

Why isn't the whole string passed into the child component? What is needed to do to pass the whole string from the parent to the child component?

Upvotes: 1

Views: 859

Answers (3)

Chandru
Chandru

Reputation: 11184

Try like this :

The following html element is valid to pass into child component.

<child-component i18n componentContent='my test<sup>&reg;</sup>not working'></child-component>

if you are using i18n-componentContent="this is a test|for testing" inside the html element and Child Component get the my test. so remove this from html element i18n-componentContent="this is a test|for testing" then you can pass full string into child component

Upvotes: 1

asmmahmud
asmmahmud

Reputation: 5044

I guess, you're converting the html tag to html entity before passing the string from parent to child and it is producing the the wrongly formatted string.

Instead that you can do the following:

Don't convert to html entity in your parent component and use encodeURIComponent function to encode the string in the parent component and in the child component use decodeURIComponent decode and after that do the conversion to html entity in the child component. I hope this way, you can avoid the problem.

Upvotes: 0

Roman C
Roman C

Reputation: 1

It's not a valid string, you need to escape html

componentContent='my test&lt;sup&gt;&reg;&lt;/sup&gt;not working'>

Upvotes: 0

Related Questions