# Component

## Hierarchical Component

When you create a component, it is associated directly with a single view, called the `host view`. The host view can be the root of a view hierarchy, which can contain embedded views, which are in turn the host views of other components. Those components can be in the same NgModule, or can be imported from other NgModules. Views in the tree can be nested to any depth.

![](https://angular.io/generated/images/guide/architecture/compilation-context.png)

![](https://angular.io/generated/images/guide/architecture/view-hierarchy.png)

## @Component configuration options

* **selector**: tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. e.g. \<app-hero-list>\</app-hero-list>
* **templateUrl**: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component's host view.
* **providers**: 定義在 Component providers 的為 Local （定義在 Module providers 的為 global）. An array of dependency injection providers for services that the component requires.

## Data Binding

reference [here](https://fancyloves.gitbook.io/frontendtech/angularjs/bindings/data-binding)

You can always bind to a **public property** of a component in its **own** template. The component author is in complete control of those bindings. It **doesn't** have to be an Input or Output property.

```markup
<img [src]="iconUrl"/>
```

But other components shouldn't have that kind of unrestricted access. Outside components should only be able to bind to the component's public binding API. You'd have a hard time supporting your component if anyone could bind to any of its properties.

The Angular compiler won't bind to properties of a **different** component unless they are **Input** or **Output** properties. Angular requires the `@Input()` and `@Output()` decorators to identify properties that outside components are allowed to bind to.

```markup
<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
</app-hero-detail>
```

![](https://angular.io/generated/images/guide/template-syntax/input-output.png)

## Declaring Input and Output properties

The data bound properties are annotated with @Input() and @Output() decorators.

```javascript
src/app/hero-detail.component.ts

@Input()  hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();
```

Alternatively, you can identify members in the inputs and outputs arrays of the directive metadata

```javascript
src/app/hero-detail.component.ts

@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.