CODEWITHSUNDEEP
angulartypescript
batgerel.e
batgerel.e

Reputation: 857

Angular directive imported but not working properly

I am using angular version 7.3.7. I created a directive and it's not working properly. Example of directive:

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

@Directive({
  selector: '[matchHeight]'
})
export class MatchHeightDirective implements OnInit {

  constructor() { }


  ngOnInit() {
    console.log("this will be work", "color: red");
  }

}

And importing my directive on shared.module.ts.

import { MatchHeightDirective } from './directives/match-height.directive';

const pipes = [DateFormatPipe, SecondToTime, HighlightSearch, TimeFormatPipe];
const components = [
  MatchHeightDirective,
];
@NgModule({
  declarations: [pipes, components],
  imports: [
    CommonModule,
  ],
  providers: [DraggableService],
  exports: [
    CommonModule,
    components,
  ],
})
export class QmsSharedModule {}

And using it like:

<div class="row" matchHeight></div>

But result are nothing works. What am i doing wrong ? Any advice for this ?

Upvotes: 0

Views: 444

Answers (3)

Neha Shah
Neha Shah

Reputation: 1247

Also export pipes, directives and components to shared module

@NgModule({
  declarations: [...COMPONENTS, ...PIPES, ...DIRECTIVES],
  imports: [
    CommonModule,
  ],

  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  exports: [CommonModule, ...COMPONENTS, ...PIPES, ...DIRECTIVES]
})

And change the styling for verification

export class MatchHeightDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.color = 'red';
  }

Component.html

<p matchHeight>Color change </p>

Upvotes: 0

Nayak
Nayak

Reputation: 762

declarations: [pipes, components],

As pipes and components are already arrays, so your declaration is now an array with 2 arrays inside it.

You can modify it to:

declarations: [...pipes, ...components],

and it should work.

Upvotes: 2

francojay
francojay

Reputation: 510

Take your pipes and directives out of their arrays.

Upvotes: 0

Related Questions