Friends I would like you to help me, everything that is in that image is in 1 component and inside it uses other components. But I would like to remove the body in another component to just add <app-cuerpo></app-cuerpo>
it, call me all its functionality, but when I enter it, it is no longer graphed
at the beginning it was like this: Kaypacha.component.html
<div fxLayout="column" fxFill class="base">
<div *ngIf="!layout.isMobile && !loading" fxLayout="column" fxFill>
<div fxLayout="row" style="height: 115px;">
<div fxLayoutAlign="center start" fxLayout="column">
<img src="assets/images/fc/modules/kaypacha/kaypacha_logo.png" style="height: 88px;">
<div fxFlex style="padding-left: 15px;font-weight: bold;"><span>ASESOR: {{cabeceraConfig.nombre}}</span></div>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div fxLayoutAlign="center center">
<img src="assets/images/fc/modules/kaypacha/copa.jpg" style="height: 115px;">
</div>
<div fxLayoutAlign="center center">
<img src="assets/images/fc/modules/kaypacha/personas.png" style="height: 115px;">
</div>
<div fxLayoutAlign="center center" >
<img src="assets/images/fc/modules/kaypacha/ranking.png" mat-button color="primary" class="bus-bot" (click)="showVarCard(0)" style="height: 115px;">
</div>
<div>
<mat-card class="pos-card" fxLayout="column" fxLayoutAlign="center center">
<span>Posición</span>
<span style="font-size: 28px; font-weight: bold;">{{cabeceraConfig.posicion}}</span>
</mat-card>
</div>
<div>
<button *ngIf="cabeceraConfig.boton" mat-button color="primary" class="bus-bot" (click)="openSearch()">
<span class="material-icons" style="font-size: 36px;">
switch_account
</span>
</button>
</div>
</div>
<div fxLayoutAlign="center center">
<img src="assets/images/fc/modules/kaypacha/fc.png" style="height: 115px; width: 190px;">
</div>
</div>
<div fxFlex fxLayout="column" style="padding-top: 10px;">
<div fxLaout="row" >
<div>
<app-preguntas-kaypacha [config]="preguntasConfig"></app-preguntas-kaypacha>
</div>
<div fxFlex fxLayout="column">
<div>
<app-puntaje-kaypacha [config]="puntajeConfig"></app-puntaje-kaypacha>
</div>
<div fxFlex style="padding-top: 12px;">
<app-desempenio-kaypacha [config]="desempenioConfig"></app-desempenio-kaypacha>
</div>
</div>
</div>
<div fxFlex>
<div style="max-height: 278px;height: 100%;">
<div fxFlex >
<app-dinamizadores-kaypacha [config]="dinamizadoresConfig"></app-dinamizadores-kaypacha>
</div>
<div fxFlex="40">
<app-bonos-kaypacha [config]="bonosConfig"></app-bonos-kaypacha>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!layout.isMobile && loading" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
<img src="assets/images/fc/mis_wait.png" alt="" style="width: 120px;height: 120px;">
<div><span>Cargando...</span></div>
</div>
<div *ngIf="layout.isMobile" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
<img src="assets/images/fc/kaypacha1.png" alt="" style="width: 240px;height: 300px;">
<span style="text-align: center;">Por el momento el módulo solo se puede visualizar correctamente en una PC/laptop.</span>
</div>
</div>
Kaypacha.component.ts
export class KaypachaComponent implements OnInit, AfterContentInit {
Highcharts: typeof Highcharts = Highcharts;
loading: boolean = true;
cabeceraConfig:any;
preguntasConfig:any;
bonosConfig:any;
puntajeConfig:any;
desempenioConfig:any;
dinamizadoresConfig:any;
constructor(public layout: LayoutService, private ant: ModKaypachaService,
public dialog: MatDialog, public user: UserService) {
}
ngAfterContentInit(): void {
}
ngOnInit(): void {
this.cabeceraConfig=cloneDeep(cabeceraConfig);
this.preguntasConfig=cloneDeep(preguntasConfig);
this.bonosConfig=cloneDeep(bonosConfig);
this.puntajeConfig=cloneDeep(puntajeConfig);
this.desempenioConfig=cloneDeep(desempenioConfig);
this.dinamizadoresConfig={i1:baseDinamizadoresConfig.line,i2:baseDinamizadoresConfig.line};
this.getServerData();
}
private getServerData(codBT?: string): void {
this.loading = true;
let profile = this.user.get('profile');
this.ant.getDashboardData(codBT).subscribe(x => {
let r = x.body.resultado;
this.cabeceraConfig.nombre = r.bloq.col_nom;
this.cabeceraConfig.posicion = onNullOrUndefined(r.bloq.rank, "--");
if (!codBT && (r.pars.hab_bot == "1" || profile.tip_use == 0)) {
this.cabeceraConfig.boton = true;
}
let d:string = r.pars.din_lis;
if(!isNullOrUndefined(d)){
let a:any = JSON.parse(d);
a.forEach((x:any,i:number)=>{
let b:any;
if(x.type=="column"){
b = cloneDeep(baseDinamizadoresConfig.column);
}else {
b = cloneDeep(baseDinamizadoresConfig.line);
}
b.title=x.title;
b.options.colors[0]=x.color;
this.dinamizadoresConfig['i'+i]=b;
});
}
console.log(r.his)
this.setBloqConfig(this.preguntasConfig, r.bloq.bloq_par);
this.setBloqConfig(this.bonosConfig, r.bloq.bloq_acum);
this.setHistConfig(this.desempenioConfig, r.his, "bloq_des");
this.setHistConfig(this.dinamizadoresConfig, r.his, "bloq_din");
this.puntajeConfig.anio = r.bloq.anio;
r.his.forEach((v, i) => {
this.puntajeConfig.hist[i] = v.punt;
});
this.puntajeConfig.hist[12] = onNullOrUndefined(r.bloq.punt_tot, '--');
this.loading = false;
});
}
private setHistConfig(base: any, cfg: any, key: string) {
cfg.forEach((v: any, i: number) => {
if (v[key]) {
let co: any = JSON.parse(v[key]);
Object.keys(base).forEach(k => {
if (co[k]) {
base[k]['hist'][i] = co[k];
}
});
}
});
}
private setBloqConfig(base: any, cfg: any): void {
if (cfg) {
let j = JSON.parse(cfg);
Object.keys(j).forEach(k => {
base[k]['val'] = j[k];
});
}
}
openSearch(): void {
const dialogConfig = new MatDialogConfig();
dialogConfig.data = {
showCloseBtn: true
};
const dialogRef = this.dialog.open(BuscadorKaypachaComponent, dialogConfig);
dialogRef.afterClosed().subscribe(v => {
if (v) { this.getServerData(v.cod_bt);
}
});
}
}
what i modify
Kaypacha.component.html
<div fxLayout="column" fxFill class="base">
<div *ngIf="!layout.isMobile && !loading" fxLayout="column" fxFill>
<div fxLayout="row" style="height: 115px;">
<div fxLayoutAlign="center start" fxLayout="column">
<img src="assets/images/fc/modules/kaypacha/kaypacha_logo.png" style="height: 88px;">
<div fxFlex style="padding-left: 15px;font-weight: bold;"><span>ASESOR: {{cabeceraConfig.nombre}}</span></div>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div fxLayoutAlign="center center">
<img src="assets/images/fc/modules/kaypacha/copa.jpg" style="height: 115px;">
</div>
<div fxLayoutAlign="center center">
<img src="assets/images/fc/modules/kaypacha/personas.png" style="height: 115px;">
</div>
<div fxLayoutAlign="center center" >
<img src="assets/images/fc/modules/kaypacha/ranking.png" mat-button color="primary" class="bus-bot" (click)="showVarCard(0)" style="height: 115px;">
</div>
<div>
<mat-card class="pos-card" fxLayout="column" fxLayoutAlign="center center">
<span>Posición</span>
<span style="font-size: 28px; font-weight: bold;">{{cabeceraConfig.posicion}}</span>
</mat-card>
</div>
<div>
<button *ngIf="cabeceraConfig.boton" mat-button color="primary" class="bus-bot" (click)="openSearch()">
<span class="material-icons" style="font-size: 36px;">
switch_account
</span>
</button>
</div>
</div>
<div fxLayoutAlign="center center">
<img src="assets/images/fc/modules/kaypacha/fc.png" style="height: 115px; width: 190px;">
</div>
</div>
<div fxFlex fxLayout="column" style="padding-top: 10px;">
<app-panel></app-panel>
</div>
</div>
<div *ngIf="!layout.isMobile && loading" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
<img src="assets/images/fc/mis_wait.png" alt="" style="width: 120px;height: 120px;">
<div><span>Cargando...</span></div>
</div>
<div *ngIf="layout.isMobile" fxLayout="column" fxFill fxLayout="column" fxLayoutAlign="center center">
<img src="assets/images/fc/kaypacha1.png" alt="" style="width: 240px;height: 300px;">
<span style="text-align: center;">Por el momento el módulo solo se puede visualizar correctamente en una PC/laptop.</span>
<!--<span style="text-align: center;">Pronto estará disponible la vista móvil. Gracias por su comprensión.</span>-->
</div>
</div>
kaypacha.component.ts
import * as Highcharts from 'highcharts';
// import * as cloneDeep from 'lodash/cloneDeep';
import { AfterContentInit, Component, OnInit, ViewChild } from "@angular/core";
import { isNullOrUndefined, onNullOrUndefined } from "app/core/shared/functions.util";
import { LayoutService } from "app/system/admin/services/layout.service";
import { ModKaypachaService } from "./compartido/servicio/mod-kaypacha.service";
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { BuscadorKaypachaComponent } from './buscador/buscador.component';
import { UserService } from 'app/system/admin/services/user.service';
//import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from './kaypacha.util';
import { PanelComponent } from './panel/panel.component';
//import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from './panel/panel.util';
//import { cabeceraConfig} from './panel/panel.util';
import { cabeceraConfig,bonosConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from './kaypacha.util';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-kaypacha',
templateUrl: './kaypacha.component.html',
styleUrls: ['./kaypacha.component.scss'],
//providers: [DatePipe]
})
export class KaypachaComponent implements OnInit, AfterContentInit {
//Highcharts: typeof Highcharts = Highcharts;
loading: boolean = true;
cabeceraConfig:any;
@ViewChild(PanelComponent) panelComponent: PanelComponent;
constructor(public layout: LayoutService, public dialog: MatDialog,
public router: Router,
private activatedRoute: ActivatedRoute) {
}
ngAfterContentInit(): void {
}
ngOnInit(): void {
const cabeceraConfig = {
nombre: '--',
posicion: '--',
boton: false
};
this.cabeceraConfig=cabeceraConfig
this.cabeceraConfig.boton = true;
this.loading = false;
}
openSearch(): void {
const dialogConfig = new MatDialogConfig();
dialogConfig.data = {
showCloseBtn: true
};
const dialogRef = this.dialog.open(BuscadorKaypachaComponent, dialogConfig);
dialogRef.afterClosed().subscribe(v => {
if (v) {
this.panelComponent.getServerData(v.cod_bt)
this.cabeceraConfig= this.panelComponent.cabeceraConfig
}
});
}
}
Create a new component called Panel to place the whole body
panel.component.ts
<div fxFlex fxLayout="column" style="padding-top: 10px;">
<div fxLaout="row" >
<div>
<app-preguntas-kaypacha [config]="preguntasConfig"></app-preguntas-kaypacha>
</div>
<div fxFlex fxLayout="column">
<div>
<app-puntaje-kaypacha [config]="puntajeConfig"></app-puntaje-kaypacha>
</div>
<div fxFlex style="padding-top: 12px;">
<app-desempenio-kaypacha [config]="desempenioConfig"></app-desempenio-kaypacha>
</div>
</div>
</div>
<div fxFlex>
<div style="max-height: 278px;height: 100%;">
<div fxFlex >
<app-dinamizadores-kaypacha [config]="dinamizadoresConfig"></app-dinamizadores-kaypacha>
</div>
<div fxFlex="40">
<app-bonos-kaypacha [config]="bonosConfig"></app-bonos-kaypacha>
</div>
</div>
</div>
</div>
panel.component.ts
import * as Highcharts from 'highcharts';
import * as cloneDeep from 'lodash/cloneDeep';
import { AfterContentInit, Component, OnInit } from "@angular/core";
import { isNullOrUndefined, onNullOrUndefined } from "app/core/shared/functions.util";
import { LayoutService } from "app/system/admin/services/layout.service";
import { ModKaypachaService } from "../compartido/servicio/mod-kaypacha.service";
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { BuscadorKaypachaComponent } from '../buscador/buscador.component';
import { UserService } from 'app/system/admin/services/user.service';
import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from './panel.util';
import { ActivatedRoute, Router } from '@angular/router';
//import { bonosConfig, cabeceraConfig, desempenioConfig, baseDinamizadoresConfig, preguntasConfig, puntajeConfig } from '../kaypacha.util';
@Component({
selector: 'app-panel',
templateUrl: './panel.component.html',
styleUrls: ['./panel.component.scss'],
//providers: [DatePipe]
})
export class PanelComponent implements OnInit, AfterContentInit {
Highcharts: typeof Highcharts = Highcharts;
loading: boolean = true;
cabeceraConfig:any;
preguntasConfig:any;
bonosConfig:any;
puntajeConfig:any;
desempenioConfig:any;
dinamizadoresConfig:any;
constructor(public layout: LayoutService, private ant: ModKaypachaService,
public dialog: MatDialog, public user: UserService,
public router: Router,
private activatedRoute: ActivatedRoute) {
}
ngAfterContentInit(): void {
}
ngOnInit(): void {
this.cabeceraConfig=cloneDeep(cabeceraConfig);
this.preguntasConfig=cloneDeep(preguntasConfig);
this.bonosConfig=cloneDeep(bonosConfig);
this.puntajeConfig=cloneDeep(puntajeConfig);
this.desempenioConfig=cloneDeep(desempenioConfig);
console.log(this.desempenioConfig)
this.dinamizadoresConfig={i1:baseDinamizadoresConfig.line,i2:baseDinamizadoresConfig.line};
this.getServerData();
}
public getServerData(codBT?: string): void {
this.loading = true;
let profile = this.user.get('profile');
this.ant.getDashboardData(codBT).subscribe(x => {
let r = x.body.resultado;
this.cabeceraConfig.nombre = r.bloq.col_nom;
this.cabeceraConfig.posicion = onNullOrUndefined(r.bloq.rank, "--");
if (!codBT && (r.pars.hab_bot == "1" || profile.tip_use == 0)) {
this.cabeceraConfig.boton = true;
}
let d:string = r.pars.din_lis;
if(!isNullOrUndefined(d)){
let a:any = JSON.parse(d);
a.forEach((x:any,i:number)=>{
let b:any;
if(x.type=="column"){
b = cloneDeep(baseDinamizadoresConfig.column);
}else {
b = cloneDeep(baseDinamizadoresConfig.line);
}
b.title=x.title;
b.options.colors[0]=x.color;
this.dinamizadoresConfig['i'+i]=b;
});
}
this.setBloqConfig(this.preguntasConfig, r.bloq.bloq_par);
this.setBloqConfig(this.bonosConfig, r.bloq.bloq_acum);
this.setHistConfig(this.desempenioConfig, r.his, "bloq_des");
this.setHistConfig(this.dinamizadoresConfig, r.his, "bloq_din");
console.log(this.desempenioConfig)
this.puntajeConfig.anio = r.bloq.anio;
r.his.forEach((v, i) => {
this.puntajeConfig.hist[i] = v.punt;
});
this.puntajeConfig.hist[12] = onNullOrUndefined(r.bloq.punt_tot, '--');
this.loading = false;
});
}
public setHistConfig(base: any, cfg: any, key: string) {
cfg.forEach((v: any, i: number) => {
if (v[key]) {
let co: any = JSON.parse(v[key]);
Object.keys(base).forEach(k => {
if (co[k]) {
base[k]['hist'][i] = co[k];
}
});
}
});
}
public setBloqConfig(base: any, cfg: any): void {
if (cfg) {
let j = JSON.parse(cfg);
Object.keys(j).forEach(k => {
base[k]['val'] = j[k];
});
}
}
showVarCard(i: number) {
if (this.layout.isMobile) {
//this.incentivos2.setCardData(i);
//this.router.navigateByUrl('variable', { relativeTo: this.activatedRoute,skipLocationChange: true });
this.router.navigate(['./ranking'], {relativeTo: this.activatedRoute,skipLocationChange: true});
}
}
}
Kaypacha.module.ts
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FlexLayoutModule } from "@angular/flex-layout";
import { FormsModule } from "@angular/forms";
import { SharedCWCModule } from "app/core/screen/components/shared-cwc.module";
import { SharedMaterialModule } from "app/core/screen/components/shared-material.module";
//import { SharedPrimengModule } from "app/core/screen/components/shared-primeng.module";
import { SharedCMCModule } from "../shared/components/shared-cmc.module";
import { KaypachaRoutingModule } from "./kaypacha-routing.module";
import { KaypachaComponent } from "./kaypacha.component";
import { PreguntasKaypachaComponent } from "./preguntas/preguntas.component";
import { PuntajeKaypachaComponent } from "./puntaje/puntaje.component";
import { DesempenioKaypachaComponent } from './desempenio/desempenio.component';
import { DinamizadoresKaypachaComponent } from './dinamizadores/dinamizadores.component';
import { BonosKaypachaComponent } from './bonos/bonos.component';
import { HighchartsChartModule } from "highcharts-angular";
import { ModKaypachaService } from "./compartido/servicio/mod-kaypacha.service";
import { BuscadorKaypachaComponent } from './buscador/buscador.component';
import { PanelComponent } from "./panel/panel.component";
import { RankingComponent } from "./ranking/ranking.component";
@NgModule({
imports: [
KaypachaRoutingModule,
CommonModule,
FormsModule,
FlexLayoutModule,
SharedMaterialModule,
SharedCWCModule,
SharedCMCModule,
HighchartsChartModule
],
declarations: [PanelComponent,KaypachaComponent, PreguntasKaypachaComponent, PuntajeKaypachaComponent,
DesempenioKaypachaComponent, DinamizadoresKaypachaComponent, BonosKaypachaComponent,
BuscadorKaypachaComponent,RankingComponent],
providers: [ModKaypachaService]
})
export class KaypachaModule { }
Kaypacha-routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { KaypachaComponent } from "./kaypacha.component";
import { PanelComponent } from "./panel/panel.component";
import { RankingComponent } from "./ranking/ranking.component";
const routes: Routes = [
{
path:'',
component:KaypachaComponent,
//component:PanelComponent,
data: {title:'Kaypacha'},
children: [
{
path:'ranking',
component: RankingComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class KaypachaRoutingModule { }
Panel.module.ts
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FlexLayoutModule } from "@angular/flex-layout";
import { FormsModule } from "@angular/forms";
import { SharedCWCModule } from "app/core/screen/components/shared-cwc.module";
import { SharedMaterialModule } from "app/core/screen/components/shared-material.module";
//import { SharedPrimengModule } from "app/core/screen/components/shared-primeng.module";
//import { SharedCMCModule } from "../shared/components/shared-cmc.module";
//import { KaypachaRoutingModule } from "./kaypacha-routing.module";
//import { KaypachaComponent } from "./kaypacha.component";
import { PreguntasKaypachaComponent } from "../preguntas/preguntas.component";
import { PuntajeKaypachaComponent } from "../puntaje/puntaje.component";
//import { DesempenioKaypachaComponent } from '../desempenio/desempenio.component';
import { DinamizadoresKaypachaComponent } from '../dinamizadores/dinamizadores.component';
import { BonosKaypachaComponent } from '../bonos/bonos.component';
import { HighchartsChartModule } from "highcharts-angular";
import { ModKaypachaService } from "../compartido/servicio/mod-kaypacha.service";
import { BuscadorKaypachaComponent } from '../buscador/buscador.component';
import { PanelRoutingModule } from "./panel-routing.module";
import { PanelComponent } from "./panel.component";
import { SharedCMCModule } from "app/modules/shared/components/shared-cmc.module";
import { KaypachaComponent } from "../kaypacha.component";
import { DesempenioKaypachaComponent } from "../desempenio/desempenio.component";
@NgModule({
imports: [
PanelRoutingModule,
CommonModule,
FormsModule,
FlexLayoutModule,
SharedMaterialModule,
SharedCWCModule,
SharedCMCModule,
HighchartsChartModule
],
declarations: [
PanelComponent, PreguntasKaypachaComponent,
PuntajeKaypachaComponent,
DesempenioKaypachaComponent, DinamizadoresKaypachaComponent,
BonosKaypachaComponent, BuscadorKaypachaComponent,KaypachaComponent],
providers: [ModKaypachaService]
})
export class PanelModule { }
panel-routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { PanelComponent } from "./panel.component";
const routes: Routes = [
{
path:'',
component:PanelComponent,
data: {title:'Kaypacha'}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PanelRoutingModule { }
app-routing.module.ts
const routes: Routes = [
{
path: '',
redirectTo: 'session/signin',
pathMatch: 'full'
},
{
path: '',
component: AuthLayoutComponent,
children: [
{
path: 'session',
loadChildren: () => import('./system/session/session.module').then(m => m.SessionModule),
data: { title: 'Session' }
}
]
},
{
path: 'login',
canActivate: [LoginGuard],
component: LoginComponent
},
{
path: 'app',
redirectTo: 'app/desktop',
pathMatch: 'full'
},
{
path: 'app',
canActivate: [AuthGuard],
component: AdminLayoutComponent,
children: [
{
path: 'desktop',
component: DesktopComponent,
data: { title: 'Desktop' }
},
{
path: 'reportes',
loadChildren: () => import('app/modules/reportes/rep01.module').then(m => m.Rep01Module),
data: { title: 'Reportes' }
}
{
path: 'kaypacha',
loadChildren: () => import('app/modules/kaypacha/kaypacha.module').then(m => m.KaypachaModule),
data: { title: 'Kaypacha' }
}
]
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Well researching I found an @Input decorator that sends data from the parent to the child so in the method that generated the parent and obtained the data I had to create several @Input decorators and pass the data, it would look like this, it should be noted that I don't know if it's right or can be improved :
Kaypacha.component.ts (Father)
Kaypacha.Component.html (Parent)
Panel.component.ts(Child)
Add the decorators