As a newcomer to Java and Angular, I am currently enrolled in a course on getting started with Angular. I have been attempting to display information in the navigator, but for some reason, nothing is showing up. Despite thoroughly checking my code, I couldn't locate any errors (as I don't have a deep understanding yet).
The name of the application is facesnap
facesnap.models.ts:
export class FaceSnap {
title!: string;
description!: string;
createDate!: Date;
snaps!: number;
imageUrl!: string;
location?: string;
}
facensnaps.component.ts:
import { OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Component } from '@angular/core';
import { FaceSnap } from '../facesnap.models';
@Component({
selector: 'app-facesnap',
templateUrl: './facesnap.component.html',
styleUrls: ['./facesnap.component.scss']
})
export class FacesnapComponent implements OnInit {
// Creating a component
@Input() facesnap!: FaceSnap;// Importing the class to be able to modify it
count!: number;
ngOnInit() {// Initializing properties. Can be done hard-coded or through requests
}
onAddSnap() {// Increment the number of snaps each time the button is pressed
if (this.count < 1) {
this.count++;
this.facesnap.snaps++;
}
}
}
app.component.ts:
import { Component, OnInit } from '@angular/core';
import { FaceSnap } from './facesnap.models';
@Component({
selector: 'app-root', // Thanks to this, we can use our component as a tag
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
mySnap1!: FaceSnap; //Creating a variable of type FaceSnap
mySnap2!: FaceSnap;
mySnap3!: FaceSnap;
ngonInit() {
this.mySnap1 = {
title: "Senes",
description: "My best frenemy",
createDate: new Date(),
snaps: 256,
imageUrl: "https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg",
location: "Berlin"
};
this.mySnap2 = {
title: "Blueno",
description: "The maximum",
createDate: new Date(),
snaps: 2254,
imageUrl: "https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg",
location: "München",
};
this.mySnap3 = {
title: "Linda",
description: "The bestie",
createDate: new Date(),
snaps: 93,
imageUrl: "https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg",
};
}
}
app.component.html:
<app-facesnap [facesnap]="mySnap1"></app-facesnap>
<app-facesnap [facesnap]="mySnap2"></app-facesnap>
<app-facesnap [facesnap]="mySnap3"></app-facesnap>
facesnap.component.html:
<div class="face-snap-card">
<h2>{{facesnap.title}}</h2>
<p>Uploaded on {{ facesnap.createDate }}</p>
<img [src]="facesnap.imageUrl" [alt]="facesnap.title">
<p>{{ facesnap.description }}</p>
<p *ngIf="facesnap.location"></p>
<p>🤌 {{ facesnap.snaps }}</p>
<p>
<button (click)="onAddSnap()">Oh Snap!</button>
🤌 {{ facesnap.snaps }}
</p>
</div>
What I received