"Go to definition" in template does not work.

[diegomaninetti]

In a html template file, pressing F12 on a variable does not navigate on .ts file any more. A message "No definition found for..." is shown.

Version 0.1.9 on vs code 1.24.1.

Example:

[infinity1207]

@diegomaninetti can you give me select.component.ts & select.component.html, it will help me solve this problem.
you can send email to infinity20091207@gmail.com thanks.

[diegomaninetti]

select.component.ts:

import { SPACE } from '@angular/cdk/keycodes';
import { AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from "@angular/core";
import { NgModel } from "@angular/forms";
import { MatInput, MatSelect } from "@angular/material";
import { FieldChangeParams } from "common/shared/component/field-change-params";
import { BehaviorSubject, Observable, of } from "rxjs";
import { map, merge } from "rxjs/operators";

@Component({
	selector: 'app-select',
	templateUrl: './select.component.html',
	styleUrls: ["./select.component.scss"],
	changeDetection: ChangeDetectionStrategy.OnPush
})

/**
 * Supporto sperimentale al filtro di ricerca, in attesa che venga inserito il mat-select-header
 * https://github.com/angular/material2/pull/7835
 */

export class SelectComponent implements OnInit, AfterViewInit, OnChanges {
	@Input()
	name: string;
	/**
	 * Lista di campi, se esistono, su cui la select ha impatto (esempio: select che modifica contemporaneamente piu' di un campo).
	 * Utilizzato per la gestione della editabilita' (editableFields).
	 */
	@Input()
	fields: string[];
	@Input()
	value: any;
	@Input()
	multiple = false;
	@Input()
	options = [];
	@Input()
	disabled = false;
	@Input()
	fnValue = (item) => item
	@Input()
	fnDisplay = (item) => item
	@Input()
	fnCompare = (s, d) => s === d
	@Input()
	mandatory = false;
	@Input()
	errors = [];
	@Input()
	editableFields?: string[] = undefined;
	@Input()
	showFilter = false;

	@Output()
	valueChange = new EventEmitter<FieldChangeParams>();

	@ViewChild("inputModel")
	inputModel: NgModel;
	@ViewChild("inputModel", { read: MatSelect })
	inputElement: MatSelect;

	@ViewChild("filterModel")
	filterModel: NgModel;
	@ViewChild("filterModel", { read: MatInput })
	filterElement: MatInput;


	@Input()
	placeholder: string;
	constructor() { }

	private optionsObservable = new BehaviorSubject([]);
	filteredOptions: Observable<any[]>;

	ngOnInit() {
		this.placeholder = this.placeholder || `fields.${this.name}`;
	}

	ngAfterViewInit(): void {
		// TODO: Sistemare questo componente: il filterModel potrebbe "nascere" successivamente a questo evento,
		// (showFilter cambia dinamicamente) in tal caso il filtro non funzionerebbe piu' bene.
		const filterObservable = this.filterModel ? this.filterModel.valueChanges : of();
		this.filteredOptions = this.optionsObservable.pipe(
			merge(filterObservable),
			map(v => Array.isArray(v) ? v : this.filterItems(v)),
			map(v => this.showFilter ? this.sortFirst(v) : v)
		);
	}

	sortFirst(values: any[]): any[] {
		if (Array.isArray(this.value)) {
			return values;
		}
		const myValue = values.find(x => this.fnCompare(this.fnValue(x), this.value));
		if (!myValue) {
			return values;
		}
		return [myValue, ...values.filter(x => x !== myValue)];

	}

	change(value) {
		this.selectAll = false;
		this.valueChange.emit({ name: this.name, value: value });
	}

	get editable(): boolean {
		if (!this.editableFields) {
			return true;
		}
		const fields = this.fields ? this.fields : [this.name];
		return this.editableFields.filter(x => fields.includes(x)).length > 0;
	}

	ngOnChanges(changes: SimpleChanges): void {
		if (changes["options"]) {
			this.selectAll = false;
			this.optionsObservable.next(this.options);
		}
		if (changes["errors"]) {
			if (this.errors && this.errors.length) {
				this.inputModel.control.markAsTouched();
				this.inputModel.control.setErrors({ [this.name]: this.errors });
			} else {
				this.inputModel.control.setErrors(null);
			}
		}
	}

	selectAll = false;

	changeSelectAll(check: boolean) {
		if (check) {
			this.change(this.options.map(this.fnValue));
		} else {
			this.change([]);
		}
		this.selectAll = check;
	}

	get selectAllDisabled() {
		return Boolean(this.filterModel && this.filterModel.value && this.filterModel.value !== "");
	}

	openedChange(event: boolean) {
		if (event && this.filterElement) {
			setTimeout(() => this.filterElement.focus());
		}
		if (!event && this.filterModel) {
			this.filterModel.reset();
			setTimeout(() => this.inputElement.focus());
		}
	}

	filterItems(value: string | any) {
		if (!value || value === "") {
			return [...(this.options || [])];
		}
		const regexp = new RegExp(`.*${value}.*`, "i");
		return this.options.filter(n => this.fnDisplay(n).match(regexp));
	}

	filterKeydown(event: KeyboardEvent) {
		if (event.keyCode === SPACE) {
			event.stopPropagation();
		}
	}
}

select.component.html:

	<mat-select [multiple]="multiple"
	 [placeholder]="placeholder | translateParams"
	 [name]="name"
	 [ngModel]="value"
	 [disabled]="disabled || !editable"
	 [compareWith]="fnCompare"
	 (openedChange)="openedChange($event)"
	 (ngModelChange)="change($event)"
	 #select="matSelect"
	 #inputModel="ngModel">
		<div class="mat-option header-option"
		 *ngIf="multiple || showFilter"
		 fxLayout="row">
			<mat-checkbox *ngIf="multiple"
			 class="mat-option-pseudo-checkbox"
			 fxFlex="0 0 auto"
			 [disabled]="selectAllDisabled"
			 [ngModel]="selectAll"
			 (ngModelChange)="changeSelectAll($event)">
			</mat-checkbox>
			<mat-form-field fxFlex="1 1"
			 *ngIf="showFilter">
				<input matInput
				 [disabled]="selectAll"
				 ngModel
				 #filterModel="ngModel"
				 (keydown)="filterKeydown($event)">
				<mat-icon matSuffix>search</mat-icon>
			</mat-form-field>
		</div>
		<mat-option *ngFor="let item of filteredOptions | async"
		 [value]="fnValue(item)">
			{{ fnDisplay(item) }}
		</mat-option>
		<mat-option *ngIf="!multiple && !mandatory"
		 [value]="undefined">
		</mat-option>
	</mat-select>
	<mat-error *ngFor="let error of errors">
		{{error | translateParams}}
	</mat-error>
	<mat-hint *ngIf="multiple && options && options.length">
		{{value?.length||0}}/{{options?.length||0}}
	</mat-hint>
</mat-form-field>

Thanks!

[ChattawasK]

it not working after update

[ezokoze]

I'm having this issue too (it's a big project ~1700 files) but works on a smaller project