• Create a folder
• Create a component file

import { Component } from '@angular/core';

@Component({
  selector: `my-c`,
  templateUrl: `./my-c.html`
})
export class MyComp {
  
}

and specify it in declarations

or

ng g c MyComp

use template instead of templateUrl for inline.

<div my-c></div>

selector: '[my-c]'

<div class="my-c"></div>

selector: '.my-c'

{{variableName}}

<p [innerText]="variableName"></p>

To Change Interpolation syntax

@Component(
  ...,
interpolation: [`[`, `]`]
)

Reserved interpolation characters

/^\s*$/
/[<>]/
/^[{}]$/
/&(#|[a-z])/i
/^\/\//

<button (click)="methodName()">Click me</button>

methodName() {
  console.log("Clicked me");
}

If you want event object then pass $event to the argument list and event as the parameter.

You can cast the element target depending on the type of element.

(<HTMLInputElement>event.target).value;

[(ngModel)]="name"

In your module

imports: [FormsModule]

[ngStyle]="myStyle"

myStyle = {backgroundColor: "red"}
OR
myStyle = {backgroundColor: getColor()}

.online {
  color: blue;
}

<p [ngClass]="{online: getBooleanValue()}">Dude</p>

<my-c *ngFor="let myc of mycs"></my-c>
<p *ngFor="let a of array">{{a}}</p>

If you need index then *ngFor="let a of array; let i=index"

@Input takes in input.

@Input name: string;

<my-c name="'Deepen'" />

If you want to alias it, use @Input('myname') name: string; then <my-c myname="'Deepen'" />

@Output exports a value.

@Output getName: new EventEmitter<string>;

getName.emit(name+' Dhamecha');

<input type="text" [value]="name" (input)="changeName($event)" #mydude />
<i>{{mydude.value}}</i>

or you can also pass it to a method argument or you can also access directly from component using @ViewChild().