Vuong-Dat Notes

Day 6,7 section 9

2 min read

summary Section 8:

  • Entity Framework Relationships
  • Entity Framework Conventions
  • Seeding Data into the Database
  • The repository pattern
  • Shaping data

Note links learn

Section 9: User interface

Learning goals:

  • Using environment variables
  • Using the asunc pipe
  • Using tailwind/daisyui for styling
  • Using interceptor for the token
  • Route resolvers
  • Using themes

JSON to TypeScript

{
    "id": "lisa-id",
    "dateOfBirth": "1986-07-22",
    "imageUrl": "https://randomuser.me/api/portraits/women/54.jpg",
    "displayName": "Lisa",
    "createdAt": "2025-08-09T14:46:42.62339",
    "lastActive": "2025-08-09T14:46:42.623377",
    "gender": "female",
    "description": "Sunt esse aliqua ullamco in incididunt consequat commodo. Nisi ad esse elit ipsum commodo fugiat est ad. Incididunt nostrud incididunt nostrud sit excepteur occaecat.\r\n",
    "city": "Greenbush",
    "country": "Martinique"
}
export interface Member {
  id: string
  dateOfBirth: string
  imageUrl?: string
  displayName: string
  createdAt: string
  lastActive: string
  gender: string
  description?: string
  city: string
  country: string
}
 
export type Photo = {
  id: number
  url: string
  publicId?: string
  memberId: string
}

Evironment:

export const environment = {
    production: false,
    apiUrl: 'api/'
};
export const environment = {
    production: false,
    apiUrl: 'https://localhost:5001/api'
};

ApUserExtensions

using API.DTOs;
using API.Entities;
using API.interfaces;
 
namespace API.Extensions;
 
public static class AppUserExtensions
{
    public static UserDto ToDto(this AppUser user, ITokenService tokenService)
    {
        return new UserDto
        {
            Id = user.Id,
            Email = user.Email,
            DisplayName = user.DisplayName,
            ImageUrl = user.ImageUrl,
            Token = tokenService.CreateToken(user)
        };
    }
}

Member list

<div class="flex flex-col gap-3">
    @for (member of members$ | async; track member.id) {
        <div>{{member.displayName}}</div>
    }
</div>

Creating and Styling member card

import { Component, input } from '@angular/core';
import { Member } from '../../../types/member';
import { RouterLink } from '@angular/router';
 
@Component({
  selector: 'app-member-card',
  imports: [RouterLink],
  templateUrl: './member-card.html',
  styleUrl: './member-card.css'
})
export class MemberCard {
  member = input.required<Member>();
 
}
 
@if (member(); as member) {
<div routerLink="/members/{{member.id}}" class="card cursor-pointer transition-all duration-300 ease-in-out tranasform hover:-translate-y-2">
    <img src="{{member?.imageUrl || '/user.png'}}" alt="{{member.displayName}} image" class="rounded-lg w-full">
    <div class="card-actions z-50 absolute bottom-0 w-full px-3 py-1 rounded-b-lg bg-gradient-to-t from-black via-black/75 to-black/0">
        <div class="flex flex-col text-white">
            <span class="font-semibold mb-1">{{member.displayName}}, 25</span>
            <span class="text-sm">{{member.city}}</span>
        </div>
    </div>
</div>
}
ng g interceptor jwt

I recornize this watsting my time, so I will stop this activities and I just note my special events.

This codes using daisyui, angular docs, heroicons.

See in Day 7 section 9 · jongkeshjuit/Datingapp@bcf5193

END

Graph View

Backlinks