Angular (2 & 4) Access template variable reference from Directive

Question

I have a Directive which goal is to add a suggestion list under a prefix-field-text component. This component is basically a searchbar.

My directive currently look like this (in all my code pieces I removed imports to add readibility):

@Directive({
    selector: '[prefixSuggest]',
    exportAs: 'prefixSuggest',
    host: {
      'class': 'prefix-field-suggest__container'
    }
  })
  export class PrefixFieldSuggestDirective implements AfterViewInit {

    private componentReference: ComponentRef<PrefixFieldSuggestComponent>;

    @Input() fieldTextRef: ElementRef;
    @Input() list: Array<PrefixSuggestLineInterface>;
    @ViewChild('fieldTextRef', {read: ViewContainerRef}) fieldTextContainer;

    constructor(private _injector: Injector, private resolver: ComponentFactoryResolver) {
        this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
    }

    ngAfterViewInit(): void {
        const prefixFieldSuggestFactory = this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
        this.componentReference = prefixFieldSuggestFactory.create(this._injector);
        this.componentReference.instance.list = this.list;
        this.fieldTextContainer.insert(this.componentReference.hostView);
    }
  }

And my component looks like this :

@Component({
  selector: 'prefix-field-suggest',
  templateUrl: './prefix-field-suggest.component.html',
  styleUrls: ['./prefix-field-suggest.component.scss']
})
export class PrefixFieldSuggestComponent {

    /** Item list to display */
    @Input() list: Array<PrefixSuggestLineInterface>;

    /** Search string typed in search input */
    @Input() searchTerm: string;

    /** Input ID to align itself beneath */
    @Input() inputId: string;

    /** Offset between the suggest and the input; default 0 */
    @Input() offset: number = 0;

    /** Event when an item is selected */
    @Output() itemSelected: EventEmitter<any>;
}

The template file for the PrefixFieldSuggestComponent :

<div class="prefix-field-suggest" 
    [ngStyle]="{ 'top': offset + 'px'}">
    <span *ngFor="let item of list">
        {{item.title | prefixBoldifyTerm:searchTerm}} {{item.metaData}}
    </span>
</div>

the PrefixSuggestLineInterface is just a contract interface so that different people in my team can implement their own suggestion lines, depending on the information they want to display into it. ATM it's basically 2 string fields.

Question : I would like to access to the ViewContainerRef of the prefix-field-ext (searchbar) component, from my directive. I tried many things like #[fieldTextRef], #[fieldTextRef]="mysearchbar", fieldTextRef, etc ....

I tried these possibilities on this simple page :

 <div class="prefix-search-group">
          <prefix-field-text prefixSuggest #fieldTextRef="prefixSuggest" list="list" [identifier]="search"></prefix-field-text>
 </div>

But in every cases, my fieldTextRef Input is always null. (Because it's not a child element). Is it even possible to do what I'm trying to do ?

Thanks a lot for your enlightning.

Where is prefix-field-text component? How are prefix-field-suggest and searchBar related? — yurzui
– yurzui, Commented Sep 27, 2017 at 15:16
Actually I can't because we use our own libraries and publish it to private NPM registry. But I admit I wasn't clear enough. I'll update subject and answer you : searchbar is in fact prefix-field-suggest. It's a custom component composed of an input and custom style and some parameters. — Alex
– Alex, Commented Sep 27, 2017 at 15:37
You can just recreate the same situation in plunker. I didn't ask to show me all code — yurzui
– yurzui, Commented Sep 27, 2017 at 15:38

yurzui · Accepted Answer · 2017-09-28 08:57:54Z

1

If you want to get ViewContainerRef for <prefix-field-text prefixSuggest just inject it in constructor prefixSuggest directive because it is applied on the same element:

export class PrefixFieldSuggestDirective implements AfterViewInit {
  constructor(private fieldTextContainer: ViewContainerRef,...) {}

answered Sep 28, 2017 at 8:57

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

Angular (2 & 4) Access template variable reference from Directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related