Beginner needs help !

[warm yoke]

Hi,
I'm Toonsa and beginner in Angular and html, css, js, ts, i'm following youtube's tutoriel and building my first app adding stuff in it when I feel i can do it and I'd like to know if my sidenav.component.ts (containing a header and a sidebar) is built correctly for now.

Here is my code in github https://github.com/To0nsa/Toonsa-projects.git SF2e

Hope it's something we can ask here 🙂
Thank you !

[warm yoke]

it is mainly this part I am worry about

[cobalt adder]

You should use class binding instead of manipulating Dom elements.

[warm yoke]

will do thank you !

[warm yoke]

Beginner needs help !

Hello, i want to make a grid with cards using the "input method" for the cards, i managed to create my cards but the problem is that because i only have one "html section" for my card, i don't know how to create a grid with several cards can anyone tell me what to do ?

i have read about matcard but it seems i have to do it all over again I will if it is the best option

i did it ! I just had to change the place of "*ngFor="let post of blogpostsList"" 😄

thank you Zertrax

[golden jetty]

There are some things you should change:

• try not to change html-elements directly in your component-class.
  • change the information inside the component class (with signals)
  • just display stuff in your html
• you can use control-flow elements instead of *ngIf or *ngFor (new since v17)
• some js / ts tricks, which you can use

Examples:

<div [class]="listOfNames"></div>
<div [class.name]="trueFalseVariable"></div>
...
<div [class.open]="isOpen()"></div>
<button (click)="trigger()">click me</button>

// some signals
isOpen = signal<boolean>(false);

trigger(): void { 
  this.isOpen.update(o => !o);
}

// ternary operator (for readability: for short expressions only)
variable: string = someBoolean ? 'isTrue' : 'isFalse'

<!-- some control-flow -->
@if (isOpen()) { 
  <span>isOpen is true</span>
} @else { 
  <span>isOpen is false</span>
}

<ul>
@for (item of [1, 2, 3]; track item.id) {
  <li>{{ item }}</li>
}
</ul>

[golden jetty]

I think you mean "JB Nizet" 😄

[warm yoke]

yep ^^ thank you for your answer i d'ont undersatnd everything but I will look into it 👍

[golden jetty]

you can find an angular tutorial on https://angular.dev/tutorials

But I recommend: learn the js fundamentals first, to understand your environment.

https://developer.mozilla.org/en-US/docs/Web/JavaScript

[warm yoke]

yes, I probably want to go to fast...

but typescript is quite different the only thing i know about js are not good practice in angular ^^

[golden jetty]

Learning pure javascript is a little bit "dry". You can learn both in parallel. Just ask in this forum for some opinions of some more experienced devs. We will help you.

[golden jetty]

TypeScript is a super set of JavaScript. Its basically JavaScript with type-hints. TypeScript will be transpiled to JavaScript (The browser cannot read typescript).

If you do not understand something, just ask.

[warm yoke]

yep i wont hesitate thank you again !

i'm following the angular tutorial but doing my own project as exercise