0

Is it possible to add a locator to an angular host component via host property?

@Component({
  selector: 'ui-header',
  templateUrl: './ui-header.component.html',
  styleUrl: './ui-header.component.scss',
  standalone: false,
  host: { "locator": "headerLocator" }, //???
})
export class UiHeaderComponent {
  title = input.required<string>()
  subtitle = input<string>()
}

desired result:

<ui-header title="my-header" #headerLocator/>
Improve this question
2
  • So these are called template reference variables. What exactly are you trying to achieve? Commented Nov 24 at 18:27
  • i want to create a base content layout and i had to access ui-header within another component. but ui-header is not in that component. rather its set from the ouside via ng-template. i want to set a padding to the headers parent component and then access ui-header in its parent and apply the padding also for its children (including ui-header). i found a working solution with: contentChild<UiContentHeaderComponent>(UiContentHeaderComponent). Basically i dont want to add #header to each ui-header component when i need one. Commented Nov 24 at 20:01
Related questions
0
Angular 11 upgrade from 10 - css :host(.name) where .name is not added to the component
754
How can I select an element in a component template?
561
@Directive vs @Component in Angular
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.