CODEWITHSUNDEEP
htmlangular
Plompy
Plompy

Reputation: 379

My first angular app does not work as expected

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 }}):

enter image description here

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!');
  });
});

Upvotes: 4

Views: 489

Answers (2)

amarmishra
amarmishra

Reputation: 613

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.

Upvotes: 1

Daniel
Daniel

Reputation: 124

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

Upvotes: 0

Related Questions