Angular v15 directives not working as in v14

Question

In angular 14 the selector was "working" and the second < input > was the only one affected by the directive. In Angular v15 the directive is not working so i added the "standalone: true" and the "hostDirectives". But now, the directive is working in both < input > not only in the one that matches the selector

directive

yearFormat = ...

@Directive({
  standalone: true, //this is new
  selector: '[myDirective]',
  providers: [{ provide: MAT_DATE_FORMATS, useValue: yearFormat }]

})
export class CustomDateFormatDirective {}

Component

@Component({
  selector: 'app-datepicker-field',
  template: `
     <input>no directive</input>
     <input myDirective>with directive</input>
    `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  hostDirectives:[CustomDateFormatsDirective] //This is new
})
export class myDatePickerCompent{}

How can i make it work as before?

Answer 1

by adding hostDirectives:[CustomDateFormatsDirective] you are assigning a directive to the app-datepicker-field element. and, as a result both inputs are affected by MAT_DATE_FORMATS. remove hostDirectives and it should be resolved