CODEWITHSUNDEEP
angular
kangular
kangular

Reputation: 263

Angular4 - Nesting Components & Inputs Error

I am trying to complete an exercise from "Angular From Theory To Practice - Asim Hussain" https://codecraft.tv/courses/angular/quickstart/nesting-components-and-inputs/

As a challenge to myself, I'm trying to go a step forward and refactor the app using Angular CLI instead of writing all the components in the same file; See sample from book http://plnkr.co/edit/LKj9OAoUMIUZhDS5HAiP?p=preview , but the app is crashing. So Far I have created two new components

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

class Joke {
  public setup: string;
  public punchline: string;
  public hide: boolean;

  constructor(setup: string, punchline: string) {
    this.setup = setup;
    this.punchline = punchline;
    this.hide = true;
  }

  toggle() {
    this.hide = !this.hide;
  }

}

@Component({
  selector: 'joke',
  template: `
    <div class="card card-block">
     <h4 class="card-title">{{data.setup}}</h4>
     <p class="card-text" [hidden]="data.hide">{{data.punchline}}</p>
     <a (click)="data.toggle()" class="btn btn-warning">Tell Me</a>
    </div>
  `
})

export class JokeComponent implements OnInit {
  @Input('joke') data: Joke;

  ngOnInit() {}

}

// JokeListComponent

import { Component, OnInit, Output } from '@angular/core';
import { JokeComponent } from '../joke/joke.component';

@Component({
  selector: 'joke-list',
  template: '<joke *ngFor="let j of jokes" [joke]="j"></joke>'
})

export class JokeListComponent implements OnInit {

  @Output() jokes: Joke[];

  constructor() {
    this.jokes = [
      new Joke("Joke 1", "Joke One Body")
    ];
  }
  ngOnInit() {}
}

And this is how my AppComponent & AppModule looks like

import { Component } from '@angular/core';
import { JokeListComponent } from '././joke-list/joke-list.component';

//AppComponent
@Component({
  selector: 'app',
  template: `
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
         <h4>Jokes App</h4>
         <hr>
         <joke-list></joke-list>
        </div>
      </div>
    </div>
  `
})
export class AppComponent {

}

// AppModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { JokeComponent } from './joke/joke.component';
import { JokeListComponent } from './joke-list/joke-list.component';

@NgModule({
  declarations: [
    AppComponent,
    JokeComponent,
    JokeListComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When I run ng serve I'm getting the following error: ERROR: in ../joke-list.component.ts (11.20): Cannot find name 'Joke'

In the joke-list.component jokes: Joke[]; // Cannot find name

Can someone help?

Upvotes: 1

Views: 2029

Answers (3)

alehn96
alehn96

Reputation: 1393

In the component joke list import the Joke model

in joke-list.component.ts

import { Joke } from './joke.component'; // path where is exported class Joke

Upvotes: 0

Amit Chigadani
Amit Chigadani

Reputation: 29775

You are missing the import statement for Joke class

import {Joke} from '../pathToJokeModel'

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71961

You should export the class Joke otherwise it cannot be used outside of the file:

export class Joke { ... }

Besides that, you should also import it wherever you use the Joke class, for instance in your JokeListComponent:

import { Joke } from '../joke/joke.component';

But it would be even better (like 10x better) to move the Joke class to an own file, instead of placing it in a component file

Upvotes: 2

Related Questions