(Sorry for my english, it's not my first language...)

I have some issue with some input paramaters I inject in my ponent when I call it with its template.

slider-multipleponent.ts :

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

@Component({
  selector: 'slider-multiple',
  templateUrl: './slider-multipleponent.html'
 })
export class SliderMultipleComponent  {
   @Input() public modifiable: boolean;
 }

slider-multipleponent.html :

<button *ngIf="modifiable">Slider Button</button>

Call of the directive (for instance on appponent.html) :

<slider-multiple modifiable="activation"></slider-multiple>

With activation defined on appponent.ts :

export class AppComponent  {
   public activation : boolean = false ;

   public activate(){
     this.activation = !this.activation;
   }
 }

The button I defined on the html template of my ponent should be visible (through the *ngIf) only when the activation parameter of the directive is at true.

Does anyone knows why it don't work as expected ?

A Stackblitz to help .

Thanks in advance !

(Sorry for my english, it's not my first language...)

I have some issue with some input paramaters I inject in my ponent when I call it with its template.

slider-multiple.ponent.ts :

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

@Component({
  selector: 'slider-multiple',
  templateUrl: './slider-multiple.ponent.html'
 })
export class SliderMultipleComponent  {
   @Input() public modifiable: boolean;
 }

slider-multiple.ponent.html :

<button *ngIf="modifiable">Slider Button</button>

Call of the directive (for instance on app.ponent.html) :

<slider-multiple modifiable="activation"></slider-multiple>

With activation defined on app.ponent.ts :

export class AppComponent  {
   public activation : boolean = false ;

   public activate(){
     this.activation = !this.activation;
   }
 }

The button I defined on the html template of my ponent should be visible (through the *ngIf) only when the activation parameter of the directive is at true.

Does anyone knows why it don't work as expected ?

A Stackblitz to help .

Thanks in advance !

• javascript
• angular
• typescript
• input

• missing the [] around modifiable. – Deepak Mani Commented Apr 12, 2018 at 15:04

1 Answer 1

Change <slider-multiple modifiable="activation"></slider-multiple>

To <slider-multiple [modifiable]="activation"></slider-multiple>

modifiable="activation" binds to the string with the value ofactivation.

[modifiable]="activation" binds to the ponent property with the name of activation.