Home › Courses › Inline Components - Inline Template & Styles

Inline Components - Inline Template & Styles

25 / 63

Inline Component in Angular

An inline component is a component where HTML and CSS are written inside the same TypeScript file. Everything stays in one file.


Why Inline Components Are Used

Inline components are used when the component is very small, like an input box, button, or simple UI part.

Creating many files for small work is not needed, so one file is enough.


Inline Component Example

In SearchBox component, the HTML is written using template and CSS is written using styles.

@Component({
selector: 'app-search-box',
template: `
<p>
<input class='search-box' type='text' placeholder='start type'>
</p>
`,
styles: `.search-box{width:300px}`,
})
export class SearchBox {}

This is called an inline component because template and style are inside the TS file.


Using Inline Component

The component is used with its selector like an HTML tag.

<app-search-box></app-search-box>


Using Inline Component Inside Loop

Inline components can be used inside a loop.

The new control flow @for is used.

@for(n of nums(); track n){
<app-search-box></app-search-box>
}

This creates multiple search boxes.


Inline Template or Inline Style

If inline-template is used, HTML stays inside TS file and CSS goes outside.

If inline-style is used, CSS stays inside TS file and HTML goes outside.


Important Interview Meaning

Inline components keep code in one file.

They are good for small components.

Components can be used inside loops.

Use @for, not *ngFor.


Share this lesson: