added child component

src/app/app.component.html

@@ -1,4 +1,5 @@
 
 
 <!-- <router-outlet></router-outlet> -->
-<app-horoscope></app-horoscope>
+<!-- <app-horoscope></app-horoscope> -->
+<app-horoscope-data-container></app-horoscope-data-container>

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,

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>

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();
+  });
+});

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);
+      }
+    });
+  }
+
+}

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">

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 {
+    }
+
 }