0

Is it possible to pass a plain string from a component template to another component? eg..

Component 1 tpl:

<survey-step-complete-msg [messageType]="'completed-survey'"></survey-step-complete-msg>

Component 2 .ts

import {Component, Input} from '@angular/core';
@Component({
    selector: 'survey-step-complete-msg',
    templateUrl: '../../../../public/template/topic/survey-step-complete-msg.html'
})
export class SurveyStepCompleteMsgComponent {
    @Input() messageType;
    constructor(){
        console.log( this.messageType );
    }
}

Component 2 tpl:

<div [ngSwitch]="messageType">

    <p *ngSwitchCase="completed-survey">Thanks</p>
    <p *ngSwitchCase="survey-step-required-fields-missing">Stuff missing</p>
    <p *ngSwitchCase="survey-required-fields-missing">Stuff missing</p>
    <p *ngSwitchCase="survey-thanks-now-save">Thanks, don't forget to save.</p>

</div>

The current result is in the component ts the @input is always undefined.

Improve this question

3 Answers 3

Reset to default
1

Wrap your switchcase statements in quotes as well.

<p *ngSwitchCase="'completed-survey'">Thanks</p>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

It's undefined in constructor because it's not there yet. Put this console.log in ngOnInit() method. It should be visible there.

also the markup is:

*ngSwitchCase="expression"

completed-survey is not an expression. try:

 <p *ngSwitchCase="'completed-survey'">Thanks</p>
Improve this answer

Comments

0

I suffered with this exact problem early on. You need to do: messageType="completed-survey" instead of [messageType]="'completed-survey'"

Improve this answer

2 Comments

ahh right ok! thanks a bundle! So much new sytax.. still trying to cram it all in :D
actually... turned out it was just the double enclosing of the string in the switch that was missing