HTML document
<div>
<header>Welcome Page</header>
<p><b>{{title}}{{text}}</b></p>
<button type="button" class="btn btn-info" (click)="onClickMe($event)">Info</button>
<br>
<br>
<rating [rating]="5"></rating>
<div *ngFor="let image of getImages">
<!-- {{image}} -->
<catpicture [data="image"]></catpicture>
</div>
</div>
Login Control file
import { Component,Input } from '@angular/core';
import { catPicture } from './login.loginname';
@Component({
selector: 'catpicture',
templateUrl: './login.component.html',
styleUrl: './login.component.scss',
providers: [catPicture]
})
export class LoginComponent {
title = "My First Angular App";
text = " Universe";
onClickMe($event: any) {
console.log("Clicked",$event);
}
getImages;
constructor(catPicture:catPicture){
this.getImages=catPicture.getPictures();
}
// @Input()data:any
}
Loginname.ts
export class catPicture{
getPictures(){
return [
{
imageUrl: "http://loremflickr.com/150/150?random=1",
imageTitle: "Product 1",
postDate: "May 31, 2018",
description: "Cras sit amet nibh libero, in gravida...",
rating:4
},
{
imageUrl: "http://loremflickr.com/150/150?random=2",
imageTitle: "Product 2",
postDate: "May 31, 2018",
description: "Cras sit amet nibh libero, in gravida...",
rating:3
},
{
imageUrl: "http://loremflickr.com/150/150?random=3",
imageTitle: "Product 3",
postDate: "May 31, 2018",
description: "Cras sit amet nibh libero, in gravida...",
rating:3
},
{
imageUrl: "http://loremflickr.com/150/150?random=4",
imageTitle: "Product 4",
postDate: "May 31, 2018",
description: "Cras sit amet nibh libero, in gravida...",
rating:3
}
];
}
}
catpicture.ts
import { Component, Input } from "@angular/core";
// import { getCatpictures } from './login.canpicture';
@Component({
selector:'catpicture',
template:`
<div class="media">
<img class="mr-3" src="{{data.imageUrl}}" alt="GeneralPicture">
<div class="media-body">
<h5 class="mt-0">Title</h5>
{{data.postDate}}
<br>
{{data.description}}
</div>
</div>
`,
styles:[`
.media{
margin-bottom:20px;
}
`]
})
export class catPicture{
@Input() data: any;
}
module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MovieComponent } from './movie/movie.component';
import { HomeComponent } from './home/home.component';
import { catPicture } from './login/login.loginname';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
MovieComponent,
HomeComponent,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [catPicture],
bootstrap: [AppComponent]
})
export class AppModule { }
and the web page displays as follows:view image here
ERROR DOMException: Invalid character in string
After examining the HTML code file again, I am unable to resolve this issue due to its simplicity. As a novice learner, can someone provide guidance on how to address this bug? Thank you for your assistance!
Any suggestions on resolving this?