how to pass values using @Input()

Question

enter image description here How should I do so that my card can get data from another file?

OneProcessItemComponent.ts

export class OneProcessItemComponent {
  @Input() item = processItem;
}

OneProcessItemComponent.html

<div class="process__item">
  <div class="process__wrap">
    <img src="{{ item.image }}" alt="process" class="process__img">
    <div class="process__item-title">{{ item.title }}</div>
    <div class="process__item-subtitle">{{ item.subtitle }}</div>
  </div>
</div>

processItem.ts

export const processItem: IProcessItem[] = [
  {
    title: `Buy Now`,
    subtitle: `Lock in a buy order now at the current
    spot price.`,
    image: `../../../../../../../assets/img/process-1.svg`,
  },

Answer 1

Your compilation errors occur because your component template expects item to be a single IProcessItem but processItem is an array of IProcessItems

You can fix it by removing the square brackets around the definition of processItem

Also you wouldn't normally assign a variable to an input like that, rather you would assign it in the parent template.

<app-one-process-item [item]="processItem"><app-one-process-item>

The idea being you can pass whatever item in you want, and it is not constrained to the specific one you currently have in your component.

Answer 2

You can do

// app component
<hello name="{{ name }}"></hello>

// hello component
@Input() name: string;

// Example

https://stackblitz.com/edit/angular-ivy-x77xcs?file=src%2Fapp%2Fhello.component.ts

Answer 3

*ngFor required for IProcessItem[]. (Try to recreate the whole scenario.)

---

app.component.ts

import { IProcessItem, processItem } from "./processItem";

@Component({...})

export class AppComponent {
  public processItem: IProcessItem[] = processItem;
}

app.component.html

<app-one-process-item [item]="processItem"><app-one-process-item>

---

processItem.ts

export interface IProcessItem {
    title: string;
    subtitle: string;
    image: string
}

export const processItem: IProcessItem[] = [{
    title: `Buy Now`,
    subtitle: `Lock in a buy order now at the current
      spot price.`,
    image: `../../../../../../../assets/img/process-1.svg`,
}];

---

OneProcessItemComponent.ts

import { IProcessItem } from "../processItem";

@Component({...})
export class CombineThreeComponent implements OnInit {
  @Input() item: IProcessItem[];

  constructor() { }
  ngOnInit(): void { }
}

---

OneProcessItemComponent.html

<div class="process__item" *ngFor="let data of item">
    <div class="process__wrap">
        <img src="{{ data.image }}" alt="process" class="process__img">
        <div class="process__item-title">{{ data.title }}</div>
        <div class="process__item-subtitle">{{ data.subtitle }}</div>
    </div>
</div>

---

Output -