0

I've created a custom directive appFade, and am trying to add it to a child component as below. When doing so, I get "Parser Error: Got interpolation ({{}}) where expression was expected." The culprit is: [appFade]="{{true}}". I saw on Got interpolation ({{}}) where expression was expected that:

{{}} never goes together with [prop]="..." or (event)="..."

I tried getting rid of the interpolation and/or the [ ] and many other permutations, but nothing works so far. Any ideas how I should fix my code?

Custom Directive "appFade":

import { Directive, Renderer, ElementRef, HostListener } from '@angular/core';
import { NgModuleResolver } from '@angular/compiler';

@Directive({
  selector: '[appFade]'
})
export class FadeDirective {

  constructor(private renderer : Renderer, private el : ElementRef) {
    el.nativeElement.style.opacity= '.6';
    el.nativeElement.style.transition = '.4s opacity'
   }

  @HostListener('mouseover') mouseover() {
    this.renderer.setElementStyle(this.el.nativeElement, 'opacity', '1');
  }

  @HostListener('mouseout') mouseout() {
    this.renderer.setElementStyle(this.el.nativeElement, 'opacity', '.6');
  }
}

HTML file:

  <app-repository-display [searchResults]="searchResults.repositories" [appFade]="{{true}}"></app-repository-display>
Crowdpleasr
  • 3,574
  • 4
  • 21
  • 37

1 Answers1

1

you need to use appFade fade="true" in the markup and then create an @Input() fade: boolean; in your @directive class to receive this value. If your goal is to just add a fade parameter to your component then you should configure it there as input and not define a custom directive.

jcuypers
  • 1,774
  • 2
  • 14
  • 23
  • 1
    Thank you! That worked great. Also realized that if I want it always to work, I don't even need the fade="true". appFade, alone, worked. – Crowdpleasr Mar 19 '19 at 22:31
  • true. but in essence you could bind that one to something like `[fade]="toggleFadeState"` this is where the binding comes in. – jcuypers Mar 19 '19 at 22:34
  • 1
    Many thanks. Curious why fade="true" in your initial response, but [fade] with "[ ]" (square brackets) in [fade]="toggleFadeState". I'm trying to learn definitively when the "square brackets" are needed, and when not needed. Tks! – Crowdpleasr Mar 20 '19 at 00:08