angular 6 - send string contains quotation marks to component input

Question

I have a component with string input:

@Component({
   selector: 'abcComponent'
   template: `
      <div>
      ....
      </div>`
})
export class AbcComponent {
   @Input() text:string;
}

I want to send a string contains quotation marks to component (for example: abc"d):

   selector: 'parentComponent'
   template: `
      <div>
         <abcComponent [text]="'abc"d'"></abcComponent>
      </div>`
})

I also tried this:

<abcComponent [text]="'abc\"d'"></abcComponent>

But in both cases i get a template parse error.

Any idea?

Answer 1

I found the way to do this is to sanitize your attribute value. Instead of using <abcComponent [text]="'abc"d'"></abcComponent>, use <abcComponent [text]="'abc&quot;d'"></abcComponent>, as " is the "sanitized value" for the quotation marks.

Consider reading this answer on how to sanitize HTML into tokens to properly escape characters.

Answer 2

In component.ts

public text: string = 'abc\"d';

In component.html

<my-component [text]="text"></my-component>