not able to read @input property value in angular 5

I am creating one component for reusing its code.

@Component({
    selector: 'app-jform',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './jform.component.html',
    styleUrls: ['./jform.component.css']
})
export class JformComponent implements OnInit {

     @Input('init') modulename:string = '';

     ngOnInit() {
        this.getJsonForm();
        console.log(this.modulename); 
     }
}

inside another compenent's view file, I have this selector's use as follow,

<app-jform [modulename]="Blue32"></app-jform>

Now I am not able to get modulename as "Blue32" in console. I have already imported input module and I haven't get any other errors.

Update :as per the suggestion from @SurenSrapyan I have changed the @Input declaration. Still Somehow not able to get it.

Now, I am getting "undefined" in console.

Upvotes: 1

Views: 987

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68635

Your element is accessible from view via name init. If you will remove 'init' part from the @Input('init'), it will be accessible via modulename.

Check this

@Input('init') modulename: string

<app-jform [init]="'Blue32'">
</app-jform>

or this

@Input() modulename: string

<app-jform [modulename]="'Blue32'">
</app-jform>

Upvotes: 5

Related Questions