DEV Community

Margaret W.N
Margaret W.N

Posted on • Edited on

1

My Scanty Angular Knowledge from GADs Project

My final GADs project is building an album store product page in angular. Just so you know the only thing I know about angular is that its a framework. I'm learning on the job though. Today's post is about the scanty knowledge I've gathered so far.

Service class

I created a service class today, but what is a service class?

A service in angular handles data allowing it to be shared among components.

Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.
Angular documentation

Command used to create a service class:

ng generate service product
Enter fullscreen mode Exit fullscreen mode

Declaring public and private Class properties

Private properties

 private _albumUrl = string;
Enter fullscreen mode Exit fullscreen mode

Public properties

public name: string;
Enter fullscreen mode Exit fullscreen mode

To access properties in a class you use this keyword:

this.name
Enter fullscreen mode Exit fullscreen mode

In the class when we refer to one of the members of the class we prepend this.. This denotes that it’s a member access.
Typescript handbook

Declaring Class Methods

getAlbum() { }
Enter fullscreen mode Exit fullscreen mode

It is an interesting ride, is should probably find a crach course on Angular.

Adding a return type to a function.

 getAlbum(id: number):Album{}
//Where Ablum is an interface
Enter fullscreen mode Exit fullscreen mode

Observables

Observable are just things you wish to observe and take action on.
Angular and Observable by Bhatt Ami

 getAlbum(id: number):Observable<Album> {}
Enter fullscreen mode Exit fullscreen mode

Casting

Changing or converting types

That's it for day 75
Let's do this again tomorrow

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay