CODEWITHSUNDEEP
angular
haya
haya

Reputation: 487

angular 6 - send string contains quotation marks to component input

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?

Upvotes: 6

Views: 4012

Answers (4)

Dilushika Weerawardhana
Dilushika Weerawardhana

Reputation: 1611

Try this

 <abcComponent [text]="'abc &quot; d'"></abcComponent>

Upvotes: 1

Andr&#233; Monteiro
Andr&#233; Monteiro

Reputation: 78

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 &quot; is the "sanitized value" for the quotation marks.

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

Upvotes: 5

Harun Or Rashid
Harun Or Rashid

Reputation: 5947

In component.ts

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

In component.html

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

Upvotes: 1

Ali Shahbaz
Ali Shahbaz

Reputation: 845

I'm sure this will solve the problem

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

Upvotes: 0

Related Questions