From 362c6a2a0676d148c46470a41a3d3d5149406501 Mon Sep 17 00:00:00 2001
From: s473561 <wikgrz12@st.amu.edu.pl>
Date: Sat, 10 Jun 2023 16:40:27 +0200
Subject: [PATCH] added child component

---
 src/app/app.component.html                    |  3 +-
 src/app/app.module.ts                         |  4 +-
 .../horoscope-data-container.component.css    |  0
 .../horoscope-data-container.component.html   |  8 ++++
 ...horoscope-data-container.component.spec.ts | 21 +++++++++
 .../horoscope-data-container.component.ts     | 44 +++++++++++++++++++
 src/app/horoscope/horoscope.component.html    |  5 ---
 src/app/horoscope/horoscope.component.ts      | 36 ++++++---------
 8 files changed, 92 insertions(+), 29 deletions(-)
 create mode 100644 src/app/horoscope-data-container/horoscope-data-container.component.css
 create mode 100644 src/app/horoscope-data-container/horoscope-data-container.component.html
 create mode 100644 src/app/horoscope-data-container/horoscope-data-container.component.spec.ts
 create mode 100644 src/app/horoscope-data-container/horoscope-data-container.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9150ef8..d2f025b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,5 @@
 
 
 <!-- <router-outlet></router-outlet> -->
-<app-horoscope></app-horoscope>
\ No newline at end of file
+<!-- <app-horoscope></app-horoscope> -->
+<app-horoscope-data-container></app-horoscope-data-container>
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cffb268..6e7cee8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,11 +8,13 @@ import { HoroscopeComponent } from './horoscope/horoscope.component';
 import { FormsModule } from '@angular/forms';
 import { OpenHoroscopeService } from './open-horoscope.service';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { HoroscopeDataContainerComponent } from './horoscope-data-container/horoscope-data-container.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HoroscopeComponent
+    HoroscopeComponent,
+    HoroscopeDataContainerComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.css b/src/app/horoscope-data-container/horoscope-data-container.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.html b/src/app/horoscope-data-container/horoscope-data-container.component.html
new file mode 100644
index 0000000..4c5d96a
--- /dev/null
+++ b/src/app/horoscope-data-container/horoscope-data-container.component.html
@@ -0,0 +1,8 @@
+<div class="search">
+    <form #form="ngForm" (submit)="onSubmit()">
+      <input type="text" placeholder="search sunsign" name="sunsign" [(ngModel)]="sunSign">
+    </form>
+  </div>
+
+    <app-horoscope [horoscopeData]="horoscopeData1" >
+    </app-horoscope>
\ No newline at end of file
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts b/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts
new file mode 100644
index 0000000..b07d14f
--- /dev/null
+++ b/src/app/horoscope-data-container/horoscope-data-container.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HoroscopeDataContainerComponent } from './horoscope-data-container.component';
+
+describe('HoroscopeDataContainerComponent', () => {
+  let component: HoroscopeDataContainerComponent;
+  let fixture: ComponentFixture<HoroscopeDataContainerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HoroscopeDataContainerComponent]
+    });
+    fixture = TestBed.createComponent(HoroscopeDataContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.ts b/src/app/horoscope-data-container/horoscope-data-container.component.ts
new file mode 100644
index 0000000..54da112
--- /dev/null
+++ b/src/app/horoscope-data-container/horoscope-data-container.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { HoroscopeData } from '../models/horoscope.model';
+import { OpenHoroscopeService } from '../open-horoscope.service';
+import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-horoscope-data-container',
+  templateUrl: './horoscope-data-container.component.html',
+  styleUrls: ['./horoscope-data-container.component.css']
+})
+export class HoroscopeDataContainerComponent implements OnInit {
+
+  faGlobe = faEarth;
+  faFire = faFire;
+  faCalendar = faCalendar;
+
+  public sunSign: string = 'Libra'
+  public horoscopeData1?: HoroscopeData;
+
+  constructor (private openHoroscopeService: OpenHoroscopeService) {
+
+  }
+
+  ngOnInit(): void {
+    this.getHoroscope();
+    this.sunSign = '';
+  }
+
+  onSubmit() {
+    this.getHoroscope();
+    this.sunSign = '';
+  }
+
+  getHoroscope() {
+    this.openHoroscopeService.getHoroscopeData(this.sunSign)
+    .subscribe({
+      next: (response) => {
+        this.horoscopeData1 = response;
+        console.log(response);
+      }
+    });
+  }
+
+}
diff --git a/src/app/horoscope/horoscope.component.html b/src/app/horoscope/horoscope.component.html
index 2643c22..e9aaf0f 100644
--- a/src/app/horoscope/horoscope.component.html
+++ b/src/app/horoscope/horoscope.component.html
@@ -1,8 +1,3 @@
-  <div class="search">
-    <form #form="ngForm" (submit)="onSubmit()">
-      <input type="text" placeholder="search sunsign" name="sunsign" [(ngModel)]="sunSign">
-    </form>
-  </div>
   <div class="container" *ngIf="horoscopeData">
     <div class="first-column">
       <div class="upper-data">
diff --git a/src/app/horoscope/horoscope.component.ts b/src/app/horoscope/horoscope.component.ts
index 90f8969..ea244d3 100644
--- a/src/app/horoscope/horoscope.component.ts
+++ b/src/app/horoscope/horoscope.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { OpenHoroscopeService } from '../open-horoscope.service';
 import { HoroscopeData } from '../models/horoscope.model';
 import { faEarth, faFire, faCalendar} from '@fortawesome/free-solid-svg-icons';
@@ -15,29 +15,21 @@ export class HoroscopeComponent implements OnInit {
   faFire = faFire;
   faCalendar = faCalendar;
 
-  constructor (private openHoroscopeService: OpenHoroscopeService) {
+  @Input()
 
-  }
-  sunSign: string = 'Libra'
-  horoscopeData?: HoroscopeData;
+  public horoscopeData?: HoroscopeData;
 
-  ngOnInit(): void {
-    this.getHoroscope(this.sunSign);
-    this.sunSign = '';
-  }
+  @Output()
+  public sunSign: string = 'Libra'
 
-  onSubmit() {
-    this.getHoroscope(this.sunSign);
-    this.sunSign = '';
-  }
 
-  private getHoroscope(sunSign: string) {
-    this.openHoroscopeService.getHoroscopeData(sunSign)
-    .subscribe({
-      next: (response) => {
-        this.horoscopeData = response;
-        console.log(response);
-      }
-    });
-  }
+  constructor(
+    ) { }
+
+    onSubmit() {
+
+    }
+    ngOnInit(): void {
+    }
+
 }