CODEWITHSUNDEEP
angulartypescript
Patrick
Patrick

Reputation: 21

Angular 4 Error: can't resolve all parameters for Component

I am totally new to Angular so please be forgiving:).

I try to come up with an Overview Page (overview.component) which shows a list consisting of Product Ideas (idea.component).

The code of the Overview Component (overview.component) looks as follows:

import {Component, TemplateRef} from '@angular/core';
import { IdeaComponent } from '../Components/ideaComponent/idea.component';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { FormsModule } from '@angular/forms';



@Component({
  selector: 'app-overview-component',
  templateUrl: './overview.component.html'
})


export class OverviewComponent {

  modalRef: BsModalRef;

  newIdea = new IdeaComponent();

  ideas = [
    new IdeaComponent('Test Project', 'Marc Salavador', new Date(2018, 3, 5)),
    new IdeaComponent('Test Project', 'Marc Salavador', new Date(2018, 3, 5)),
  ];

  constructor(private modalService: BsModalService) {}

  public openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }

}

The HTML of the Overview Page (overview.component.html) looks as follows:

<body>

<h1>Overview</h1>

<br>
<br>

<div class="card">
    <h5 class="card-title border font-weight-bold">Create your own Product Idea:</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  <button type="button" class="btn btn-primary" (click)="openModal(newIdeaModal)">Create new Product Idea</button>
</div>

<!-- New Idea Modal -->
<ng-template #newIdeaModal>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="form-group">
      <label>Titel:</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label>Author:</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modalRef.hide()">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</ng-template>


<br>
<br>

<h4>Current Product Ideas:</h4>

<div *ngFor="let idea of ideas">
  <app-idea-component title="{{idea.title}}" author="{{idea.author}}" [date]="idea.date"></app-idea-component>
</div>

</body>

The code of the Idea Component (idea.component) looks as follows:

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

@Component({
  selector: 'app-idea-component',
  templateUrl: './idea.html'
})


export class IdeaComponent {

  constructor (public title: string = '',
               public author: string = '',
               public date: any = '') {}

}

Angular now reports an error that it can't resolve all parameters for IdeaComponent.

I would be very thankful for some support on this.

Best regards

Upvotes: 0

Views: 1722

Answers (2)

Houssem Romdhani
Houssem Romdhani

Reputation: 332

Change IdeaComponent component to:

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

@Component({
  selector: 'app-idea-component',
  templateUrl: './idea.html'
})


export class IdeaComponent {

  @Input() title: string = ''
  @Input() author: string = ''
  @Input() date: any = ''
  constructor () {}

}

Upvotes: 0

Markai
Markai

Reputation: 2098

You try to pass your inputs to your IdeaComponent via the constructor, which causes the Angular DI system to look for providers for title, author and date. You need to use Inputs for component interaction:

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

@Component({
  selector: 'app-idea-component',
  templateUrl: './idea.html'
})
export class IdeaComponent {

  @Input() public title: string = '';
  @Input() public author: string = '';
  @Input() date: any = '';

}

Upvotes: 1

Related Questions