develop #1
@ -1,4 +1,5 @@
|
||||
|
||||
|
||||
<!-- <router-outlet></router-outlet> -->
|
||||
<app-horoscope></app-horoscope>
|
||||
<!-- <app-horoscope></app-horoscope> -->
|
||||
<app-horoscope-data-container></app-horoscope-data-container>
|
@ -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,
|
||||
|
@ -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>
|
@ -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();
|
||||
});
|
||||
});
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
@ -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">
|
||||
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user