Passing data from one component to another in angular js

 export class AppComponent {
title = 'shopping-cart';
ngOnInit() {
}
images = [
{
title: 'At the beach',
url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
},
{
title: 'At the forest',
url: 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
},
{
title: 'At the City',
url: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
},
{
title: 'At the Snow',
url: 'https://images.unsplash.com/photo-1517299321609-52687d1bc55a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
},
{
title: 'At the beach',
url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
},
{
title: 'At the forest',
url: 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
},
{
title: 'At the City',
url: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
},
{
title: 'At the Snow',
url: 'https://images.unsplash.com/photo-1517299321609-52687d1bc55a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
},
];
}
<-- App component template -->
<app-nav></app-nav>
<div class="container">
<div class="columns mt-5 is-8 is-variable is-flex-wrap-wrap">
<div class="column is-4-tablet is-3-desktop" *ngFor="let image of images">
<app-card [image]="image"></app-card>
</div>
</div>
</div>

<-- card component ts -->

import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css'],
})
export class CardComponent implements OnInit {
@Input() image = {};
constructor() {}
ngOnInit(): void {
console.log(this.image);
}
}

<-- card component template-->

<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img [src]="image.title" [alt]="" />
</figure>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on
<a href="https://twitter.com/codinghorror/status/506010907021828096"
>Twitter</a
>
</span>
</p>
<p class="card-footer-item">
<span> Share on <a href="#">Facebook</a> </span>
</p>
</footer>
</div>

{{ image | json }}

I have my component as follows, i'm passing down the images to an app-card component, however when i'm trying to access the image.title property it shows that it doesn't exist, but when piping(debugging purpose) the property it shows the date for each card respectively. What am I missing please help

couple of things.

1. When I define my Input, they look like this:

   @Input('image') image: any = {};

not sure if that makes a difference or not.

2. In your card component you want to use url, not title:

   <img [src]="image.url" [alt]="" />

3. Then add title like this

   <div>{{image.title}}</div>

4. Also a good idea to add *ngIf at the top to prevent errors on loading:

   <div *ngIf=image" class="card">