CODEWITHSUNDEEP
angularangular-material2
Leix
Leix

Reputation: 135

Inject host component in directive (material)

I am able to inject a component in a directive constructor like this :

constructor(private hello: HelloComponent) {
  console.log(hello.test)
}

This work nice but my directive need to work specially with Mat-Select, so I am trying something like that :

constructor(private matSelect: MatSelect) {
  console.log(matSelect)
}

this way is not working : 

Error: StaticInjectorError(AppModule)[SelectSearchDirective -> MatSelect]: 
StaticInjectorError(Platform: core)[SelectSearchDirective -> MatSelect]: 
NullInjectorError: No provider for MatSelect!

Is there a way to access to MatSelect (I need to play with [(value)])

Thanks in advance.

Stackblitz : https://stackblitz.com/edit/material-tooltip-select-search?file=src%2Fapp%2Fapp.component.html

Upvotes: 0

Views: 464

Answers (2)

chaimm
chaimm

Reputation: 400

to access all the properties on the mat select you need to do import {MatSelect} from '@angular/material'; then in component, @ViewChild('myTemplateReference') select: MatSelect;

on the html you just need to add template reference

 <mat-select #myTemplateReference [(ngModel)]="value">

with all that, the select property now gives you all methods and properties of mat select.

but if all you need is the value,why not just use [(ngModel)]="value"

then on selection change use (selectionChange)="doSomething()"

doSomething(){

    this.value...
}

Upvotes: 1

SiddAjmera
SiddAjmera

Reputation: 39462

You can have access to it using ElementRef.

Inject ElementRef in your Directive as a dependency:

import { ..., ElementRef, ... } from '@angular/core';
...
constructor(private el: ElementRef) {}

You can now use this.el in your directive to have access to the MatSelect.

Upvotes: 0

Related Questions