Avatar ·

How to access a DOM element in an Angular component template?

Hello everyone! I just started learning Angular and TypeScript, and I encountered a problem when working with DOM elements inside a component.\n\nI have a simple component that displays a button and an input field. I need the focus to automatically move to this input field when the button is clicked. I tried using the regular `document.getElementById()`, but it doesn't work as I expected, and generally in Angular it's not recommended to do this.\n\nHere is my current code:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-my-form',\n template: `\n
\n \n \n
\n `\n})\nexport class MyFormComponent {\n focusInput() {