0

I am learning Angular 11. I am following this code. My code is like below.

carousel.interface.ts

export interface Slide {
  headline?: string;
  src: string;
}

carousel.component.ts

import { Component, Input } from '@angular/core';
import { Slide } from './carousel.interface';

@Component({
  selector    : 'carousel',
  templateUrl : './carousel.component.html',
  styleUrls   : ['./carousel.component.scss'],
})

export class CarouselComponent {

  @Input() slides: Slide[]; 

  currentSlide = 0;

  constructor() { }
}

Are { Slide } and Slide[] same ? If same then why slides is not populating ?

I read this SO post. But I think issue of that post is different.

abu abu
  • 6,599
  • 19
  • 74
  • 131
  • 1
    No. The `{ Slide }` indicate in your import statement, to just import the `Slide` variable/interface/class/function/type from the given folder. `Slide[]` indicate the type of the property `slides` of `CarouselComponent` class is an array of `Slide`. Since it is decorated with `@Input` you should provide the `slides` array from the parent component. ( `from app component` ) – Dilshan May 30 '21 at 01:44
  • Thanks @Dilshan. How can I provide the slides array from the parent component. ( from app component ) ? There is `slides: Slide[] = [ { headline: 'Miouw', src: 'sometext' }, { headline: 'In The Wilderness', src: 'sometext' }, { headline: 'For Your Current Mood', src: 'sometext' }, { headline: 'Focus On The Writing', src: 'sometext' } ]` in `app.component.ts`. Is it enough ? What is `@Input` here ? Thanks. – abu abu May 30 '21 at 02:11
  • 1
    Check the line number 2 of `app.component.html` in the code you are following. The actual `slides` array is defined inside the `app.component.ts` line 33. That's the one you provide to the child component `carousel` via an `@Input()`. Here's some information about `@Input`. https://angular.io/guide/inputs-outputs – Dilshan May 30 '21 at 03:36
  • Thanks @Dilshan. I am learning Angular 11. Why I am getting `Property 'slides' has no initializer and is not definitely assigned in the constructor.` error in this line `@Input() slides: Slide[];` ? Thanks. – abu abu May 30 '21 at 08:36
  • 1
    open the `tsconfig.json` and set `"strictPropertyInitialization": false` or else add `!` to the end of the variable like, `@Input() slide! : Slide[]` – Dilshan May 30 '21 at 09:38

0 Answers0