0

Estou seguindo um tutorial para a criação de um dashboard com bootstrap v3 com angular 2, entretanto eu estou tentando seguir utilizando o bootstrap v4 e angular 8. Na criação do Navbar e o menu lateral não tive problemas em migrar o código utilizando as novas versões, acontece que nas classes mais 'faceis' o grid do bootstrap não está funcionando, eu tentei criar um componente de um card e replicar ele 4x com a classe col-6 de modo que ficassem dois em cima e dois embaixo, mas eles ficam como coluna.

componente painel-simples

 <div class="col-{{col}}">
    <div class="card">
        <div class="card-header bg-{{ tipo }}">
            <p class="card-subtitle"> {{ titulo }}</p>
        </div>
        <div class="card-body">
           <ng-content></ng-content>
        </div>
    </div>
</div>

painel-simples.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-painel-simples',
  templateUrl: './painel-simples.component.html',
  styleUrls: ['./painel-simples.component.css']
})
export class PainelSimplesComponent implements OnInit {


  @Input() titulo;
  @Input() col = 6;
  @Input() tipo = "info"
  constructor() { }

  ngOnInit() {
  }

}

resumo.component.html

<app-painel-simples titulo="Consultas marcadas últimos 30 dias" col="6">
    <h3 class="text-center"> {{resumo.consultas.consultas_30dias_anteriores}} </h3>
</app-painel-simples>

<app-painel-simples titulo="Consultas marcadas Próximos 30 dias" col="6">
    <h3 class="text-center"> {{resumo.consultas.consultas_30dias_posteriores}} </h3>
</app-painel-simples>

<app-painel-simples col=6 titulo='Faturamento Anterior'>
    <div class="box-faturamento">
        <div class="col-10">
            <h3 class="text-left">{{resumo.faturamento.anterior.valor | currency : 'BRL'}}</h3>
        </div>
        <div class="alert col-2 sm" [ngClass]="resumo.faturamento.anterior.comparativo
        >= 0 ? 'alert-success' : 'alert-danger'">
            <p>{{resumo.faturamento.anterior.comparativo}}%</p>
        </div>
    </div>
</app-painel-simples>
<app-painel-simples col=6 titulo='Faturamento Previsão'>
    <div class="box-faturamento">
        <div class="col-10">
            <h3 class="text-left">{{resumo.faturamento.previsao.valor | currency : 'BRL'}}</h3>
        </div>
        <div class="alert col-2 sm" [ngClass]="resumo.faturamento.previsao.comparativo
        >= 0 ? 'alert-success' : 'alert-danger'">
            <p>{{resumo.faturamento.previsao.comparativo}}%</p>
        </div>
    </div>
</app-painel-simples>

app.component.html

<app-barra-navegacao></app-barra-navegacao>

<div class="main">
  <app-menu-lateral></app-menu-lateral>
  <div class="container">
    <app-resumo></app-resumo>

  </div>
</div>

Não sei se pode mas estou postando o link do código no github https://github.com/dfealves/Dash-board-Angular para facilitar a compreensão, gostaria de entender o que estou fazendo de errado, já que o mesmo código em uma pagina html com o bootstrap funciona sem problemas.

1 Resposta 1

1

Eu fui no seu no seu package.json não encontrei "bootstrap": "^4.3.1", então adicionei.

<div class="row">
  <app-painel-simples titulo="Consultas marcadas últimos 30 dias" class="col-6">
    <h3 class="text-center"> {{resumo.consultas.consultas_30dias_anteriores}} </h3>
  </app-painel-simples>

  <app-painel-simples titulo="Consultas marcadas Próximos 30 dias" class="col-6">
    <h3 class="text-center"> {{resumo.consultas.consultas_30dias_posteriores}} </h3>
  </app-painel-simples>
</div>

e no painel-simples

<div class="card">
    <div class="card-header bg-{{ tipo }}">
      <p class="card-subtitle"> {{ titulo }}</p>
    </div>
    <div class="card-body">
      <ng-content></ng-content>
    </div>
 </div>

o ideal seria fazer assim

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .