Angular2 access @Input from class inside constructor that calls a service

Question

I am new to Angular2 and Typescript. I am trying to gain access to a @Input from the constructor in my class. A service is called from inside the constructor and I need to pass it an argument.

@Component({
    selector:'side-menu',
    templateUrl:'menu.html',
    providers:    [MenuService]
 })

export class SideMenuComponent {
    @Input() blockType;

    menuItems

    constructor(menuService:MenuService){
        this.menuItems = menuService.getMenuItems(this.blockType); // Sends Undefined
        this.menuItems = menuService.getMenuItems('HardCodedString'); //This works
    }


}

and this is my Service

    @Injectable()

export class MenuService {
    getMenuItems(type) {
        console.log(type)

        switch(type){
            case 'Thing':

                return [];
                break;
            case 'Otherthing':
                return [];
                break;
            default:
                return [];


        }

    }
}

How can I ensure the @Input gets sent to the service?

Which version are you using of Angular2?

micronyks
– micronyks

2016-09-25 18:52:52 +00:00
Commented Sep 25, 2016 at 18:52 — micronyks
– micronyks, Commented Sep 25, 2016 at 18:52

yurzui · Accepted Answer · 2016-09-25 18:50:38Z

2

Inputs are not yet set when the constructor is called. Move the constructor code to ngOnInit() instead.

@Component({
    selector:'side-menu',
    templateUrl:'menu.html',
    providers:    [MenuService]
 })

export class SideMenuComponent {
    @Input() blockType;

    menuItems

    constructor(private menuService:MenuService){}

    ngOnInit() {
        this.menuItems = this.menuService.getMenuItems(this.blockType); // Sends Undefined
        this.menuItems = this.menuService.getMenuItems('HardCodedString'); //This works
    }
}

Every time @Input()s are updated ngOnChanges() is called.
ngOnInit() is called after ngOnChanges() was called the first time.

edited Sep 25, 2016 at 18:50

yurzui

215k32 gold badges450 silver badges413 bronze badges

answered Sep 25, 2016 at 18:38

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rob Over a year ago

Tried this and get : core.umd.js:3464 ORIGINAL EXCEPTION: menuService is not defined

Günter Zöchbauer Over a year ago

Sounds like you are missing an import for MenuService (like import {MenuService} from './menu.service')

Günter Zöchbauer Over a year ago

@yurzui edited my answer and fixed some other issues I copied from your question - thanks!

Rob Over a year ago

Works! Thank you!

Collectives™ on Stack Overflow

Angular2 access @Input from class inside constructor that calls a service

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related