A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Creaci贸n de la tabla de jugadores

22/28
Recursos

Aportes 24

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

hola aqui les dejo los estilos que usa el profesor

body {
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
}
section {
  margin: 50px;
}

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table {
  width: 100%;
  table-layout: fixed;
}
.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}
.tbl-content {
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tbl-content-player {
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 300px;
}

th {
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
td {
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  &:target {
    opacity: 1;
    pointer-events: auto;
  }
  & > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: #ffffff;
    color: #333333;
  }
  header {
    font-weight: bold;
  }
  h1 {
    font-size: 150%;
    margin: 0 0 15px;
    color: #333333;
  }
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: #000;
  }
}

form {
  .form-group {
    padding-bottom: 15px;
  }

  input,
  textarea,
  select {
    width: 235px;
    background-color: #f6f6f6;
    border: solid 1px #25c481;
    font-size: 13px;
    color: #000000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
  }

  select {
    width: 246px;
  }

  label {
    font-size: 14px;
    color: #555555;
    font-weight: normal;
    display: block;
    float: left;
    margin: 0;
    padding: 3px 13px 0 0;
    text-align: right;
    width: 140px;
  }

  .checkbox {
    width: auto;
  }

  .submit-container {
    text-align: right;
  }

  .submit {
    background-color: #25b7c4;
    border: solid 1px #25c481;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 25px;
    padding-left: 25px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  &.required label {
    font-weight: bold;
  }

  span.required label {
    font-weight: bold;
  }
}

/* Demo Styles */

html,
body {
  height: 100%;
}

body {
  font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  background-color: #f69d75;
  color: #555555;
}

a {
  color: inherit;
}

.container {
  justify-content: center;
  align-items: center;
  height: 50px;
}

.btn {
  background-color: #fff;
  padding: 1em 1.5em;
  border-radius: 3px;
  text-decoration: none;
  i {
    padding-right: 0.3em;
  }
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

Donde est谩 el repo?

Estoy bastante confundido. Reci茅n tom茅 esta ruta y este es uno de los primeros cursos de la misma. 驴Qu茅 son observables? 驴Qu茅 son pipes? 驴Se aclaran estas dudas en los cursos posteriores?

creo que este curso esta algo desactualizado, tengo errores con las dependencias por todos lados

Si alguien tiene un error con player[], puede resolverlo de la siguiente forma:

player : null!

Al poner el ! despues de null, se le indica a typescript aunque algo parezca nulo, puede confiar en que no lo es

Imposible completar el curso, desactualizado con respecto a la ultima versi贸n de Angular (12), siento que perd铆 mi tiempo con este curso.

Este curso es bueno, pero esta desactualizado en lo relacionado a firebase.

remitanse a la documentacion para ver los cambios:

https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md#3-add-firebase-config-to-environments-variable

AngularFireDatabase => AngularFirestore
AngularFireList => AngularFirestoreCollection

las importaciones de 鈥渁ngularfire2/database鈥 ahora son 鈥淍angular/fire/firestore鈥

db.list() => db.collection() toca guiarse del autocomplete de VsCode dentro de los metodos provistos por firebase.

es mejor remitirse a la docu.

Hola por si alguien est谩 haciendo este proyecto y lo hace con stylus, aqu铆 les dejo el c贸digo CSS convertido a Stylus 馃槃

body
  background -webkit-linear-gradient(left, #25c481, #25b7c4)
  background linear-gradient(to right, #25c481, #25b7c4)

section
  margin 50px

h1
  font-size 30px
  color #fff
  text-transform uppercase
  font-weight 300
  text-align center
  margin-bottom 15px

table
  width 100%
  table-layout fixed

.tbl-header
  background-color rgba(255, 255, 255, 0.3)

.tbl-content
  overflow-x auto
  margin-top 0px
  border 1px solid rgba(255, 255, 255, 0.3)

.tbl-content-player
  overflow-x auto
  margin-top 0px
  border 1px solid rgba(255, 255, 255, 0.3)
  height 300px

th
  padding 20px 15px
  text-align left
  font-weight 500
  font-size 12px
  color #fff
  text-transform uppercase
  border-bottom 1px solid rgba(255, 255, 255, 0.3)

td
  padding 15px
  text-align left
  vertical-align middle
  font-weight 300
  font-size 12px
  color #fff
  border-bottom solid 1px rgba(255, 255, 255, 0.1)

.modal-window
  position fixed
  background-color rgba(255, 255, 255, 0.25)
  top 0
  right 0
  bottom 0
  left 0
  z-index 999
  opacity 0
  pointer-events none
  -webkit-transition all 0.3s
  -moz-transition all 0.3s
  transition all 0.3s

  &:target
    opacity 1
    pointer-events auto

  & > div
    width 400px
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    padding 2em
    background #ffffff
    color #333333

  header
    font-weight bold

  h1
    font-size 150%
    margin 0 0 15px
    color #333333

.modal-close
  color #aaa
  line-height 50px
  font-size 80%
  position absolute
  right 0
  text-align center
  top 0
  width 70px
  text-decoration none

  &:hover
    color #000

form
  .form-group
    padding-bottom 15px

  input, textarea, select
    width 235px
    background-color #f6f6f6
    border solid 1px #25c481
    font-size 13px
    color #000000
    -moz-border-radius 4px
    -webkit-border-radius 4px
    border-radius 4px
    padding-top 5px
    padding-bottom 5px
    padding-left 5px
    padding-right 5px

  select
    width 246px

  label
    font-size 14px
    color #555555
    font-weight normal
    display block
    float left
    margin 0
    padding 3px 13px 0 0
    text-align right
    width 140px

  .checkbox
    width auto

  .submit-container
    text-align right

  .submit
    background-color #25b7c4
    border solid 1px #25c481
    font-size 16px
    color #ffffff
    font-weight bold
    padding-top 8px
    padding-bottom 8px
    padding-right 25px
    padding-left 25px
    -moz-border-radius 15px
    -webkit-border-radius 15px
    border-radius 15px
    margin-top 0px
    margin-bottom 0px

  &.required label
    font-weight bold

  span.required label
    font-weight bold

/* Demo Styles */
html, body
  height 100%

body
  font 600 18px / 1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
  background-color #f69d75
  color #555555

a
  color inherit

.container
  justify-content center
  align-items center
  height 50px

.btn
  background-color #fff
  padding 1em 1.5em
  border-radius 3px
  text-decoration none

  i
    padding-right 0.3em

::-webkit-scrollbar
  width 6px

::-webkit-scrollbar-track
  -webkit-box-shadow inset 0 0 6px rgba(0, 0, 0, 0.3)

::-webkit-scrollbar-thumb
  -webkit-box-shadow inset 0 0 6px rgba(0, 0, 0, 0.3)

seria bueno crear los componentes dentro de un directorio llamado components? as铆 podr铆a estar m谩s organizado el proyecto, no?

Es seguro poner mis keys privados en un archivo de configuraci贸n en Angular?

Este curso es muy interesante, pero est谩 muy desactualizado y siendo nuevo en Angular, me es imposible continuar. He intentado documentarme, pero Angular cambia demasiado entre versiones y asi mismo Firebase, por lo que es imposible poder continuar鈥 espero que los siguientes cursos de angular est茅n m谩s vigentes 馃槬

AYUDAAAA!!!

me sale este error:

Property 鈥榩ipe鈥 does not exist on type 鈥榲oid鈥.ts(2339).

sal铆an otros pero los solucione. dejo mi c贸digo:

import { Component, OnInit } from '@angular/core';
import { TeamService, TeamsTableHeaders } from '../services/team.service';
import { Observable } from 'rxjs';
import { take} from 'rxjs/operators';
import { Team } from '../interfaces/team';
import { Countries } from '../interfaces/player';

@Component({
  selector: 'app-team-table',
  templateUrl: './team-table.component.html',
  styleUrls: ['./team-table.component.scss'],
})
export class TeamTableComponent implements OnInit {
  public teams$: any = new Observable<Team[]>();
  //public teams$: Observable<Team[]> | undefined;
  public tableHeaders = TeamsTableHeaders;

  constructor(private teamService: TeamService) {}

  ngOnInit() {
    this.teams$ = this.teamService.getTeams();
    this.teamService
      .getTeams()
      .pipe(take(1))
      .subscribe(teams => {
        if (teams.length === 0) {
          const team: Team = {
            name: 'MyAmazingTeam',
            country: Countries.Argentina,
            players: null!,
          };
          this.teamService.addTeam(team);
        }
      });
  }
}

alguien le dio este error o alguien sabe como solucionar soy principiante angular, como ven trate de reiniciar el servicio pero nada

Me aparece este error.
Donde agrego o donde busco ese header?
ERROR in src/app/team-table/team-table.component.html:7:65 - error TS2339: Property 鈥榟eader鈥 does not exist on type 鈥楾eamTableComponent鈥.

7 <th> *ngFor=鈥渓et header of tableHeaders鈥> {{header}}</th>
~~~~~~

src/app/team-table/team-table.component.ts:11:16
11 templateUrl: 鈥./team-table.component.html鈥,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TeamTableComponent.

El IDE (WebStorm) me marca que cellpadding y cellspacing ya son atributos de HTML Deprecated, que tan malo es segur utiliz谩ndolos?

no carga mi localhost a alguien le paso esto

Hola Team estoy teniendo este error, y soy nuevo con Angular y TS alguna idea? lo 鈥渕ejor鈥 de todo es que funciona y est谩 creando el registro en Firebase ![]!

Wuauuuu siento que vamos a toda, supongo que se explicaran mas a fondo en el siguiente curso de angular. Por el momento todo a funcionado bien ay que re leer el c贸digo una cuantas veces para lograrlo entender de manera correcto, o al menos ha sido mi solucion.

tengo un problema me dice que team no existe en el type TeamTableComponent

Me gusto mucho la facilidad con la que se integran y se obtienen nuestros datos

Tengo un error a alguien le paso algo similar
![](

Me dice que si compila bien pero no visualizo nada en mi navegadir chorme

chunk {main} main.js, main.js.map (main) 22.3 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 12.7 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered] Date: 2020-06-11T23:19:56.173Z - Hash: da915ce43e8c632540d1 - Time: 7396ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled successfully.

la integraci贸n con firebase es muy sencilla, ayuda mucho como tener un backend pero sin hacerlo.