CODEWITHSUNDEEP
javascriptangular
Bryan White
Bryan White

Reputation: 334

Angular 4: Getting component property values. What am I doing wrong?

I'm a fairly green Angular 1 dev trying to get my head around Angular 4. So far so good but I'm hung up on what I'm sure is a pretty simple problem that one of you can solve in a second.

In my template I have this tag

<app-card [cardsType]="majorArcana"></app-card>

Here's the card.component.ts for 

import { Component, OnInit, Input } from '@angular/core';
import { CardsDataService } from '../cards-data.service'; 

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})

export class CardComponent implements OnInit {

    cardData: any;

    @Input() cardsType: string;


    constructor(private CardsDataService: CardsDataService) {}

    ngOnInit() {
        this.CardsDataService.getData().subscribe((data) => {
            this.cardData = data.tarot;
        });

        console.log(this.cardsType);
    }

}

I'm probably just misunderstanding how this works but I would have thought that @Input() cardsType: string; would log this.cardsType as "majorArcana" in the console.

Is that not how it works?

Upvotes: 2

Views: 146

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

Basically what happens is when you wrap your attribute with [] it evaluates that expression against component context and whatever evaluated value gets assigned. So here in this case majorArcana was evaluated to undefined(and you were expected it to be passed as string)

You could overcome this issue by just using attribute instead of property binding.

cardsType="majorArcana"

The other & preferred way would be @Frank Modica's answer. As its already covered I'm just linking it to Frank's answer.

Upvotes: 3

Frank Modica
Frank Modica

Reputation: 10516

Here you are saying that you want to pass in a property of the parent component named majorArcana:

<app-card [cardsType]="majorArcana"></app-card>

You should be able to pass in the string directly like this:

<app-card [cardsType]="'majorArcana'"></app-card>

Edit: check out the answer from @PankajParkar for the other way.

Upvotes: 4

Related Questions