Unable to display custom component using of Angular 20.2.0

I am trying to use Angular, found nice tutorial, installed Angular using CLI, was ready for some challenges as the tutorial from 5 years ago; however, I can get beyond the first step

I created a custom component square.component.ts

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

@Component({
selector: 'app-square',
standalone: false,
template: `
<button class="square">{{ value }}</button>
<h1>Hello from Square Component</h1>
`,
styles: [`
.square {
width: 60px;
height: 60px;
font-size: 24px;
margin: 2px;
background: #fff;
border: 1px solid #999;
cursor: pointer;
}
`]
})
export class AppSquareComponent {
@Input() value: string | null = null;
}


I tried to reference it via the index.html like the tutorial suggests

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myapp2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-square></app-square>
<app-root></app-root>
</body>
</html>


Not working the component is NOT showing up. I tried to ask the copilot but the copilot suggests to place app-square into app.component.html

app.component.html:

<h1>Welcome mm to {{ title }}!</h1>
<p>My first Angular app</p>


app.component.ts:

import { Component } from '@angular/core';
import { AppSquareComponent } from "./square.component";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myapp2';
}


However, despite copilot's suggestion, nothing from the app.component.html is showing up either

What can I do to display square.component.ts?

Thank you every one in advance

Continue reading...