CODEWITHSUNDEEP
angulartypescriptinputwebstorm
Roma Kap
Roma Kap

Reputation: 636

Angular Input will not be recognized

I am trying, within WebStorm, to implement @Input-Dekorator.

Actually it is simple, but my IDE does not suggest my @Input-variable.

Code:

"AppComponent" sends to "UserComponent" some value

import {Component} from "@angular/core";
import {UserComponent} from "./user/user.component";

@Component({
    selector: 'app',
    templateUrl: './app/app.component.html'
})

export class AppComponent {

    public master_chef:string = "MASTER CHEF";
    constructor () {
        console.log ("App Component");
    }

}

and app.component.html

<nav>NAVIGATION</nav>
<main>
    <h1>MAIN</h1>
    <user_component> 
       <!--user_component will be recognized, cause i can create user-
         templates, which i see.-->
<!--Usually WebStorm suggest me @Input-Parameter "master_name" and parent-variable "master_chef", but now i can not retrieve these.-->
       [master_name]='master_chef';
    </user_component>
</main>

UserComponent looks like this:

@Component({
    selector: 'user_component',
    template: `<h3>HELLO FROM USER</h3>`
})

export class UserComponent {

    @Input()
    master_name:string; //this variable will not be suggested above by AppComponent
    constructor () {
        console.log ("User Component");
    }
}

I can see only <h3>HELLO FROM USER</h3> from my UserComponent. What's wrong here?

UPDATE

app.component.html looks like this:

<nav>NAVIGATION</nav>
<main>
    <h1>MAIN</h1>
    <user_component>
       [master_name]="master_chef";
    </user_component>
</main>

Usually WebStorm suggests me input-field master_name from user_component. But now it will not be recognized or suggested. Event master_chef field from app_component will not be recognized or suggested.

What's wrong here?

UPDATE 2

I've changed the selector name within my component from user_component to user. One-way from Datasource to View-Target on this way works within app.component.html: I can see value from detail_message-variable, but [mastername] does not work :(

<user>
        [mastername]="masterchef";
        {{detail_message}}

    </user>

Upvotes: 1

Views: 308

Answers (1)

Roman C
Roman C

Reputation: 1

Webstorm correctly suggests but you should place binding in the tag header, not in the tag body. Also it's not a typescript statement and you don't need to write ; at the end. In the template you can use only expressions.

<nav>NAVIGATION</nav>

<main>
    <h1>MAIN</h1>
    <user_component
       <!--user_component will be recognized, cause i can create user-
         templates, which i see.-->
<!--Usually WebStorm suggest me @Input-Parameter "master_name" and parent-variable "master_chef", but now i can not retrieve these.-->
       [master_name]='master_chef'>
    </user_component>
</main>

Upvotes: 3

Related Questions