My first angular app does not work as expected - html

Question

I started to play around with Angular, I downloaded all the relevant stuff, but I'm getting the following output (I should see some name instead of {{ name }}):
Here is app.component.html:
<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>
Here is app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.styl']
})
export class AppComponent {
name = 'ddd';
}
Here is app.component.spec.ts:
import { TestBed, async } from '#angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'my-first-app'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('my-first-app');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-first-app!');
});
});

Answer 1

Couple of things you can check:
Debugging starts from Browser's console tab. Check if you've an error. If yes then click on that error. Angular doc will guide you what mistakes you've made.
Check if you have imported FormsModule in you app.module.ts file.
Alternatively, You can verify if you've a successful started the initial project like this also (this will also confirm that you've error with FormsModule):
In app.component.html file
<input (keyup)="onKey($event)">
<p>{{values}}</p>
In app.component.ts file
values = '';
onKey(event: any) { // without type info
this.values += event.target.value + ' | ';
}
Write something and check if this works. If yes then you've error with FormsModule and not with Angular project.
Note: just to verify in start you can disable the test cases.

Answer 2

A very good start is using the cli to initialize your project.
The Angular CLI makes it easy to create an application that already
works, right out of the box. It already follows our best practices!
First
npm install -g #angular/cli
Then
ng new my-dream-app
Then
cd my-dream-app
Finally
ng serve