angular 7 display image from array of objects

Question

In Angular 8 I have 2 components: add-book & display-book ad inject service - book.service. I search problem with preview image from display-book.component.ts. When it's save in books array, display-book component display image from this array. Apart image, title and description is display, work fine. I was looking for using FileReader but without any effects.

book.service.ts:


    import { Injectable } from '@angular/core';

    @Injectable({
      providedIn: 'root'
    })
    export class BookService {

      constructor() { }

      url: any = '';
      books: any[] = [];

      addBook(imageUrl: string, title: string, description: string) {
        const imgUrl: string = imageUrl

        const book = {
          imgUrl,
          title,
          description
        }
        this.books.push(book);
        console.log(this.books);
      }
    }

display-book.component.ts:


    import { BookService } from './../services/book.service';
    import { Component, OnInit } from '@angular/core';


    @Component({
      selector: 'app-display-book',
      templateUrl: './display-book.component.html',
      styleUrls: ['./display-book.component.scss']
    })
    export class DisplayBookComponent implements OnInit {

      url = this.bookService.url;
      books = this.bookService.books;

      constructor(private bookService: BookService) { }

      ngOnInit() { }

      displayBooks(event) {
        console.log(this.books)

        if (event.target.files && event.target.files[0]) {
          var reader = new FileReader();

          reader.onload = (event:any) => {
            this.url = event.target.result;
          }

          reader.readAsDataURL(event.target.files[0]);
        }
      }
    }

add-book.component.ts:

    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormBuilder } from '@angular/forms';
    import { BookService } from '../services/book.service';

    @Component({
      selector: 'app-add-book',
      templateUrl: './add-book.component.html',
      styleUrls: ['./add-book.component.scss']
    })
    export class AddBookComponent implements OnInit {


      addForm: FormGroup;
      constructor(private formBuilder: FormBuilder, private bookService: BookService) { }

      ngOnInit() {
      }

      createForm() {
        this.addForm = this.formBuilder.group({
          BookImageUrl: [''],
          BookTitle: [''],
          BookDescription: ['']
        });
        console.log(this.addForm);
      }

      addBook(imageUrl: HTMLInputElement, title: HTMLInputElement, description: HTMLInputElement) {
        this.bookService.addBook(imageUrl.value, title.value, description.value);
      }

    }

What does a book object look like? Why don't you simply use the attribute binding syntax on an img tag. Something like this: <img [src]="imgUrl" /> ? — SiddAjmera
– SiddAjmera, Commented Dec 10, 2019 at 10:38

SiddAjmera · Accepted Answer · 2019-12-10 10:54:48Z

1

I'd simply iterate through the list of books that you have in the service and render them using the property binding syntax in Angular. Somewhat like this:

<ul *ngIf="books.length > 0">
  <li *ngFor="let book of books">
    <img [src]="book.imgUrl" [alt]="book.title">
  </li>
</ul>
<h1 *ngIf="books.length === 0">Add Books to see them here</h1>

Here's a Working Code Sample for your ref.

answered Dec 10, 2019 at 10:54

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular 7 display image from array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related