Json Server API

src/app/models/Vagas.models.ts

@@ -1,7 +1,16 @@
 export class Vaga {
-    "id": number;
-    "nome": string;
-    "foto": string;
-    "descricao": string;
-    "salario": number;
+    id: number = 0;
+    nome: string = "";
+    foto: string = "";
+    descricao: string = "";
+    salario: number = 0;
+
+
+    constructor(id:number, nome:string, foto:string, descricao:string, salario:number){
+        this.id = id;
+        this.nome = nome;
+        this.foto = foto;
+        this.descricao = descricao;
+        this.salario = salario;
+    }
 }

src/app/mural-vagas/mural-vagas.component.css

@@ -0,0 +1,28 @@
+header div{
+    width: 100%;
+    height: 50px;
+}
+
+.lista-vagas{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.lista-vagas .card{
+    margin: 10px 20px;
+    min-height: 400px;
+}
+
+.card-vagas{
+    display: flex;
+}
+
+footer {
+    background: #343A40;
+    width: 100%;
+    height: 50px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}

src/app/mural-vagas/mural-vagas.component.html

@@ -1,14 +1,30 @@
-<div *ngFor="let vaga of vagas">
-
-
-<div class="card" style="width: 18rem;">
-  <img src="assets\img\vagas\{{vaga.foto}}" class="card-img-top" alt="...">
-  <div class="card-body">
-    <h5 class="card-title">Código da vaga: {{vaga.id}}</h5>
-    <h5 class="card-title">Vaga: {{vaga.nome}}</h5>
-    <p class="card-text"> Descrição da vaga:  {{vaga.descricao}} </p>
-    <p class="card-text"> Salário:  R$ {{vaga.salario}},00 </p>
+<header>
+  <div class="p-3 mb-2 bg-warning text-dark"></div>
+</header>
+<section class="lista-vagas">
+  <div class="mt-5">
+    <div class="container">
+      <article class="card-vagas">
+        <div *ngFor="let vaga of vagas">
+          <div class="card" style="width: 18rem">
+            <img
+              src="assets\img\vagas\{{ vaga.foto }}"
+              class="card-img-top"
+              alt="..."
+            />
+            <div class="card-body">
+              <h5 class="card-title">Código da vaga: {{ vaga.id }}</h5>
+              <h5 class="card-title">Vaga: {{ vaga.nome }}</h5>
+              <p class="card-text">Descrição da vaga: {{ vaga.descricao }}</p>
+              <p class="card-text">Salário: R$ {{ vaga.salario }},00</p>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
   </div>
-</div>
+</section>
 
-</div>
+<footer >
+
+</footer>

src/app/mural-vagas/mural-vagas.component.ts

@@ -23,7 +23,13 @@ export class MuralVagasComponent implements OnInit {
         retornaVaga =>  {
           this.vagas = retornaVaga.map(
             item => {
-              return new Vaga();
+              return new Vaga(
+                item.id,
+                item.nome,
+                item.foto,
+                item.descricao,
+                item.salario
+              );
             }
           )
         }

src/app/vagas.service.ts

@@ -8,7 +8,7 @@ import { Vaga } from './models/Vagas.models';
 })
 export class VagasService {
 
-  private url = "";
+  private url = "http://localhost:3000/vagas";
 
   constructor(private _httpClient: HttpClient) { }
     getVagas(): Observable<Vaga[]>{

vagas-db.json

@@ -3,21 +3,21 @@
         {
             "id": 1,
             "nome": "Desenvolvedor Front End",
-            "foto": "foto1.jpg",
+            "foto": "foto1.png",
             "descricao": "Trabalhar com Angular",
             "salario": 5000
         },
         {
             "id": 2,
             "nome": "Desenvolvedor Fullstack Senior",
-            "foto": "foto2.jpg",
+            "foto": "foto2.png",
             "descricao": "Trabalhar com Angular e Spring",
             "salario": 10000
         },
         {
             "id": 3,
             "nome": "Desenvolvedor Back End Plenao",
-            "foto": "foto3.jpg",
+            "foto": "foto3.png",
             "descricao": "Trabalhar com Spring Boot",
             "salario": 5000
         }