How to pass value in angular 2 selector using variable?

Question

I want to pass value to selector of angular like below. What is different in this question is that I am passing the variables to selector properties of child component.

              <app-jform 
                  [modulename]="'({{modulename}})'"
                  [tabpgrpid]="'({{tabpgrpid}})'"
                   [tabgrpname]="'({{tabgrpname}})'"
                 [usertabgrpname]="'({{usertabgrpname}})'"
                  [moduleid]="'({{moduleid}})'"
                [templateid]="'({{templateid}})'">
             </app-jform>

here modulename, tabgrpid, tabgrpname etc. are variables defined and assigned in component. I am getting the following error while doing this.

                 Parser Error: Got interpolation ({{}}) where expression was 
                 expected at column 1 in ['{{modulename}}'] in 
               ng:///AppModule/ViewBaseComponent.html@65:3 ("

                   <app-jform 
            [ERROR ->][modulename]="'{{modulename}}'"
           [tabpgrpid]="'{{tabpgrpid}}'"
          [tabgrpname]="'{{tabgrpname}}'"
            "): ng:///AppModule/ViewBaseComponent.html@65:3

how to pass this variables to properties of selector?

First little bit try by your self or googling and then post question. This is basic — Sandip - Frontend Developer, Jan 23 '18 at 10:13
Dup of https://stackoverflow.com/search?q=%5Bangular%5D+Got+interpolation — yurzui, Jan 23 '18 at 10:14
Possible duplicate of [Got interpolation ({{}}) where expression was expected](https://stackoverflow.com/questions/42456459/got-interpolation-where-expression-was-expected) — Sandip - Frontend Developer, Jan 23 '18 at 10:16
I tried the solution from above questions but couldn't use that. Either I am getting errors or no data is getting passed. — Talk is Cheap Show me Code, Jan 23 '18 at 10:24

score 2 · Accepted Answer · edited Jan 23 '18 at 10:25

2

Just pass without the annotation

<app-jform  [modulename]="modulename"
            [tabpgrpid]="tabpgrpid"
            [tabgrpname]="tabgrpname"
            [usertabgrpname]="usertabgrpname"
            [moduleid]="moduleid"
            [templateid]="templateid">
 </app-jform>

edited Jan 23 '18 at 10:25

Sandip - Frontend Developer

14,397
4
35
61

answered Jan 23 '18 at 10:12

Sajeetharan

216,225
63
350
396

I am getting this error after trying like this. Parser Error: Unexpected token 'Lexer Error: Unterminated quote at column 11 in expression [modulename']' at column 12 in [modulename'] in ng:///AppModule/ViewBaseComponent.html@57:12 (" ][modulename]="modulename'" [tabpgrpid]="tabpgrpid" [tabgrpname]="tabgrpname" – Talk is Cheap Show me Code Jan 23 '18 at 10:23
there was extra single quote, try it now – Sajeetharan Jan 23 '18 at 10:24
I removed the single quotes, Now there is no parsing errors but data is not getting assigned now. its saying undefined in component. – Talk is Cheap Show me Code Jan 23 '18 at 10:27
when I use this
{{modulename}} {{tabpgrpid}} {{tabgrpname}} {{usertabgrpname}}
just above the selector I have all values printed...also if I assign some hardcoded values, the parameters of selctors are working. – Talk is Cheap Show me Code Jan 23 '18 at 10:30
I am not getting any errors now but the value of property like modulename is undefined at ngonit function. – Talk is Cheap Show me Code Jan 23 '18 at 10:44
What happened, is modulename variable was not ready and even it was getting assigned .I just Put the ngif condition and then printed the same thing. and problem solved. – Talk is Cheap Show me Code Jan 23 '18 at 13:01

How to pass value in angular 2 selector using variable?

1 Answers1