Passing a string with HTML tags from parent to child component

Question

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?

Answer 1

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