Change CSS via @Input in Angular 2/4

Question

I am attempting to streamline my application by using a single template to reference a custom element, and then specify the contents via the @Input() property decorator. The method I am using isn't working and I'm not sure why, my code is as follows:

Component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'side-menu-option',
  templateUrl: './side-menu-option.component.html',
  styleUrls: ['./side-menu-option.component.css']
})
export class SideMenuOptionComponent implements OnInit {

  @Input() icon: string; // Inputs
  @Input() text: string;

  constructor() { }

  ngOnInit() {
  }

}

Component.html

<button class="buttons button-style btn-block" type="button"><i class="mdi mdi-{{icon}}"></i><span class="menu-text">{{text}}</span></button>

OtherComponent.html

<div class="side-nav text-center">
  <div class="side-nav-container">
    <img class="avatar" src="http://placehold.it/150x150">
    <side-menu-option [icon]="home" [text]="Home"></side-menu-option>
    <side-menu-option [icon]="file-document" [text]="Documents"></side-menu-option>
  </div>
</div>

[icon] and [text] are not being recognized for some reason and I am not sure why. It worked before I tried to refactor it, but for some reason these inputs are not being loaded.

Thanks

Emerson Jair · Accepted Answer · 2017-06-29 14:24:45Z

1

Well you have to understand that [icon]="statement here" takes a statement but you are passing it a string so you have to wrap your string in quotes again to make it a string explicitly.

<div class="side-nav text-center">
  <div class="side-nav-container">
    <img class="avatar" src="http://placehold.it/150x150">
    <side-menu-option [icon]="'home'" [text]="'Home'"></side-menu-option>
    <side-menu-option [icon]="'file-document'" [text]="'Documents'"></side-menu-option>
  </div>
</div>

Note: This is also a good practice because one can look at it and will know that these are input properties but if you remove these brackets[] they can be easily confused for attributes. Just want to mention, there is no harm in either approach.

edited Jun 29, 2017 at 14:24

Emerson Jair

1287 bronze badges

answered Jun 29, 2017 at 14:18

Raheel Anwar

2672 silver badges10 bronze badges

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

Comments

Alexis Facques · Accepted Answer · 2017-06-29 13:59:13Z

0

Bind without brackets if your inputs aren't any parent attributes

<div class="side-nav text-center">
  <div class="side-nav-container">
    <img class="avatar" src="http://placehold.it/150x150">
    <side-menu-option icon="home" text="Home"></side-menu-option>
    <side-menu-option icon="file-document" text="Documents"></side-menu-option>
  </div>
</div>

answered Jun 29, 2017 at 13:59

Alexis Facques

1,8733 gold badges14 silver badges20 bronze badges

Comments

praveen · Accepted Answer · 2017-06-29 14:04:08Z

0

<div class="side-nav text-center">
  <div class="side-nav-container">
    <img class="avatar" src="http://placehold.it/150x150">
    <side-menu-option icon="home" text="Home"></side-menu-option>
    <side-menu-option icon="file-document" text="Documents"></side-menu-option>
  </div>
</div>

Remove the property binding syntax ([]brackets) for the Input properties in parent component ([item] => item)

answered Jun 29, 2017 at 14:04

praveen

4956 silver badges12 bronze badges

Comments

Emerson Jair · Accepted Answer · 2017-06-29 14:16:11Z

0

EDIT: I first misunderstood the question, the problem actually is that you should use 'value' for your values, because Angular will look for variables called home, file-document, and so on. You should use this instead:

<side-menu-option [icon]="'home'" [text]="'Home'"></side-menu-option>
<side-menu-option [icon]="'file-document'" [text]="'Documents'"></side-menu-option>

edited Jun 29, 2017 at 14:16

answered Jun 29, 2017 at 14:10

Emerson Jair

1287 bronze badges

2 Comments

Jarred Parr Over a year ago

Is this a better method as opposed to simply removing the brackets?

Emerson Jair Over a year ago

@JarredParr I think Raheel Anwar did answer your question in his answer.

Collectives™ on Stack Overflow

Change CSS via @Input in Angular 2/4

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related