Results not found working

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { NotFoundComponent } from './not-found/not-found.component';
 import { ImageService } from './services/image.service';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { ErrorComponent } from './error/error.component';
 
 @NgModule({
   declarations: [
@@ -22,6 +23,7 @@ import { HttpClientModule } from '@angular/common/http';
     ImageListComponent,
     NavbarComponent,
     NotFoundComponent,
+    ErrorComponent,
   ],
   imports: [
     BrowserModule,

src/app/error/error.component.css

@@ -0,0 +1,33 @@
+h1 {
+  font-size: 3em;
+  margin-bottom: 20px;
+  font-weight: var(--fw-bold);
+  font-family: var(--ff-primary);
+  color: var(--clr-accent);
+  text-shadow: 2px 2px var(--clr-dark);
+}
+
+h2 {
+  margin-top: 20px;
+  font-size: 1.3em;
+  font-weight: var(--fw-reg);
+  font-family: var(--ff-primary);
+  color: var(--clr-dark);
+}
+
+.noresults {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+a {
+  text-decoration: none;
+}
+
+.img-not-found {
+  width: 500px;
+  align-self: center;
+  margin-top: 100px;
+  cursor: pointer;
+}

src/app/error/error.component.html

@@ -0,0 +1,10 @@
+<a (click)="returnList()">
+  <div class="noresults">
+    <img
+      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRLmDDGhuBgwDmBdnqVqGZ--vODJf3fkw_MIqhYxm4mGT1tzM&s"
+      alt="Not Found Image"
+      class="img-not-found"
+    />
+    <h2>A pesquisa não encontrou resultados!</h2>
+  </div>
+</a>

src/app/error/error.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorComponent } from './error.component';
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent;
+  let fixture: ComponentFixture<ErrorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ErrorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/error/error.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { DatastoreService } from '../services/datastore.service';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.css'],
+})
+export class ErrorComponent implements OnInit {
+  constructor(private dataStore: DatastoreService, private router: Router) {}
+
+  ngOnInit(): void {}
+
+  returnList() {
+    this.dataStore.getImages(1);
+    this.router.navigate(['']);
+  }
+}

src/app/navbar/navbar.component.html

@@ -62,7 +62,6 @@
         Search
       </button>
     </form>
-    <app-modal *ngIf="searchInput == '' || null"></app-modal>
   </div>
 </nav>
 <ng-template #data let-modal>
@@ -90,3 +89,4 @@ <h6 class="modal-title">Search Error</h6>
     </button>
   </div>
 </ng-template>
+<app-error *ngIf="dataStore.Images.length == 0"></app-error>

src/app/navbar/navbar.component.ts

@@ -25,7 +25,7 @@ export class NavbarComponent implements OnInit {
   isMenuCollapsed = true;
 
   constructor(
-    private dataStore: DatastoreService,
+    public dataStore: DatastoreService,
     private modalService: NgbModal,
     private router: Router
   ) {}