Project 30: Admin Dashboard

Angular Engineer

Builds on these lessons

Component Task

Objective

Capstone. A production build swaps in environment.prod.ts in place of the dev environment file — the standard way an Angular app keeps environment-specific config (like an API URL) out of its component code.

You're finishing the admin dashboard for deployment.

Task: write an environment.prod.ts exporting production: true and an apiUrl, and a DashboardComponent that imports it and displays the apiUrl.

component.ts

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

// dashboard.component.ts
import { Component } from '@angular/core';
import { environment } from './environment.prod';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `<p>API: {{ apiUrl }}</p>`
})
export class DashboardComponent {
  apiUrl = environment.apiUrl;
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous