DEV Community: Benjamin RICHARD

Yet another Angular article, part 5 : output

Benjamin RICHARD — Wed, 18 Dec 2024 08:02:34 +0000

In communication between component you have to define inputs, describes in previous articles, and outputs.

If inputs are the solution to give information from parent, to children, then outputs allows children to send information to their parents.

With Angular, outputs are declared in chilren using a signal like this :

public myOutput = output<string>();
public setMyOutput = (myOutput: string) => this.myOutput.emit(myOutput)

And parent component can listen to output with this syntax :

@Component({
  ...
  template: `<childrenComponent (myOutput)="setUsername($event)"/>`
})
export class ParentComponent {
  setUsername(username: string) {
    ...
  }
}

So, output MUST be public. And to listen to output, you MUST use parenthesis, AND use the standard $event variable that is the keyword used everytime in template to bind event.

That’s all !

But…

You can do something else. Here you have to manually ‘emit’ the new value. In fact, the previous output syntax (before v18) was really similar to EventEmitter. So, it was possible to use Observable as Output like this :

public @Output() myOutput$ = toObservable(this.myOutput);

Each time the Observable changes, an event is emitted. The source of the Observable can be a Subject, or like in my sample, an Observable based on a signal, using toObservable operator.

That’s all for output parts.

Have a nice 🌧️ day

[note] all articles use command from Angular v19*

[demo] a sample project is available on StackBlitz

Yet another Angular article, part 4 : Input

Benjamin RICHARD — Tue, 03 Dec 2024 21:59:27 +0000

In my previous article, we modified the default project configuration. This time, we will create our first components and use Input/Output to bind them together.

In the second article, you created a HelloWorld component. Please delete the src/app/hello-world folder if it still exists in your project.

Next, create the HelloWorldForm and HelloWorld components:

ng generate component hello-world-form
ng generate component hello-world

Edit the main app.component.ts to use the new component:

@Component({
  selector: 'app-root',
  imports: [HelloWorldFormComponent],
  template: `
    <h1>Yet another angular article, part 4 : Input</h1>
    <app-hello-world-form />
  `,
})
export class App {}

Edit src/app/hello-world-form/hello-world-form.component.ts like this :

import {
  ChangeDetectionStrategy,
  Component,
  signal,
  WritableSignal,
} from '@angular/core';
import { HelloWorldComponent } from '../hello-world/hello-world.component';

@Component({
  selector: 'app-hello-world-form',
  imports: [HelloWorldComponent],
  template: `
<input type="text" [value]="username()" (keyup)="setUsername($event)"/>
Hello {{ username() }}
`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelloWorldFormComponent {
  username: WritableSignal<string> = signal('');
  setUsername = (ev: Event) =>
    this.username.set((ev.target as HTMLInputElement).value);
}

In HelloWorldFormComponent, we declare a signal 'username', and use it in the template string with the syntax username() because signals are functions. We use attribute data binding syntax in Angular templates with hooks like [value]="username()". Everything within the quotes is TypeScript code (no need to use the 'this' keyword). This binds TypeScript code to any kind of attributes.

We also add a setter bound to the input event onKeyup: (keyup)="setUsername($event)".

Parentheses around attributes signify Angular’s syntax to bind a DOM or component event to a method. The argument $event is the event's output.

Run the application and enter something in the input field. You should see Hello 'YOUR INPUT VALUE' to the right of the input field.

Now edit again the src/app/hello-worl/hello-world.component.ts like this :

imports: [HelloWorldComponent],
template: `
  <input type="text" [value]="username()" (keyup)="setUsername($event)"/>
  <app-hello-world [username]="username"></app-hello-world>
`,
Edit src/app/hello-worl/hello-world.component.ts like this :

import { ChangeDetectionStrategy, Component, input } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `Hello {{ username() }}`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelloWorldComponent {
  username = input('');
}

In HelloWorldComponent, we declare an input 'username' and use it in the template string with the syntax {{ username() }}. We use input as a signal. This new syntax (since v18) declares an input with a default value of an empty string, making username a Signal.

Note: Inputs are ReadableSignals only, so you cannot change the signal’s value inside this component. To enable this (and use two-way binding, which is not best practice), you must use model instead of input. Model is a WritableSignal.

Run the application again. It should function as before, but now each component has a single responsibility.

If you need the input to be mandatory, use the required option: username = input.required(''). You can also transform the input by adding a function: username = input.required('', {transform: (value: string) => value.toUpperCase()}).

That’s all for input parts.

See you soon under ❄️

[note] all articles use command from Angular v19*

[demo] a sample project is available on StackBlitz

Yet Another Angular Article, Part 3 : configurations and environments

Benjamin RICHARD — Fri, 29 Nov 2024 14:01:20 +0000

In my previous article, we learnt how to generate a component. Before going forward, i think that we should have a look at various notions about configurations and environments.

There is different king of configuration : Angular behavior and typescript compiler. Today we will have a look at the Angular part, and it’s all in angular.json project.

This file describe all your project, and follow a schema from Angular CLI : /@angular/cli/lib/config/schema.json

The ‘projects’ is the main part. And in this one, you will see ‘schematics’ and ‘architect’.

Architect describe the behaviors of the CLI : build, serve, test, …

Schematics describe how to generate code. And this is what we will do today.

Here is mine after the first article :

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

We can see that it contains ‘scss’ for the style key. This is because, when i created the project, i answered ‘scss’ to the cli prompt.

But i want to do more. Ususally i prefer to build component with Single File Component pattern. This is like VueJS does. Your styles, html and typescript code in one file. This is because it forces you to build little component.
To do that, add those lines : inlineStyle and inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

Now when you will run ng generate component my-new-component it will create only the typescript file.

We will continue with some optimizations. Best practices explain that you should always set your Change Detection to ‘OnPush’. So, it should be done during component generation.
To do that, add this line : changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

That’s it, you now have setup your default project code generation.

In previous Angular version, you were able to define “standalone: true”. But it’s now the default behavior.

I will end with Envinronment concept. When you are building application, you usually depends on APIs. These Apis may be served locally (on your computer when you are writing code) but can be served by test-server, pre-production server, or production server.
So you have to set the hostname in a variable.

Angular bring a kind solution for this : environment.

ng generate environments

This command will adds 2 new files in your project : environment.ts and environment.development.ts
And it will also modify your angular.json by adding a ‘fileReplacements’ array in the node ‘projects.my-new-project.architect.configurations.development’

During the build process, it replaces the required environment.ts by the required environment file (environment.development.ts for example).

You can store all specific environment variablse inside and import the environment.ts everywhere you need it. But take care to not import other environement.*.ts because they won’t be available at runtime !

Here is a sample of environment :

export const environment = {
  production: false,
  calendarApi: {
    host: https://localhost:5000/api/v1,
  }
};

So you just have to create a new ‘environment.production.ts’ with required variables inside. Then, alter the angular.json to add the fileReplacements section under ‘project.architect.configurations.production’ like this :

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.production.ts"
  }
]

To my mind, Angular should have create both development and production files. That’s a bit strange.

Ho, i have forgot to say that in Angular v19, you can define global variable at startup. This might be an alernative to environment concept but it requires more setup on build process.

Have a nice day ☁️

[note] All articles use command from Angular v19*

Yet Another Angular Article, Part 2 : components creation

Benjamin RICHARD — Fri, 29 Nov 2024 12:54:19 +0000

In the previous article, i just talked about project creation. I mean, the main project, not sub-projects. Those one will be the subject of a future article.

Today is related to component creation. And like project creation, the Angular CLI is your best friend. So go an with :

ng generate component hello-world

It run the code generation in the folder my-new-project/src/app/hello-world with 4 files :

hello-world.component.html : the template
hello-world.component.scss : the styles, in scss format since this is my choice at the project creation prompt
hello-world.component.spec.ts : the test file
hello-world.component.ts : the component

Now run ng serve and open the browser to localhost:4200 to see the result
Hey, but the component is not rendered ! Why ?
Because we didn't use it :-)

Now open the root component 'app.component.ts' and add HelloWorlComponent in 'imports' section :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@Component({
 selector: 'app-root',
 imports: [RouterOutlet, HelloWorldComponent],
 templateUrl: './app.component.html',
 styleUrl: './app.component.scss',
})
export class AppComponent {
 title = 'angular-tutorial';
}

The component is now available in AppComponent, and we can use it. Just edit the hello-world.component.html file and replace all the code by this :

<app-hello-world></app-hello-world>
<router-outlet />

Forget router-outlet for instance since we didn't prevent the installation of Angular Router on project creation (if you don't want routing you can do this : ng new my-new-project --routing=false )

The default selector prefix is 'app', that's why the selector of the component is 'app-hello-world'

Check the browser and you will see the default content of your component.

You can customize the css by adding this to hello-world.component.scss :

:host {
 color: blueviolet
}

Check the browser and you will see the new color of the text. The :host selector is related to the current hello-world component.

So now, you know how to generate a simple component

Have a nice day 🌞

[original post] https://rebolon.medium.com/yet-another-angular-article-part-2-components-creation-550c14b991a2

Yet Another Angular Article, Part 1

Benjamin RICHARD — Fri, 29 Nov 2024 12:51:23 +0000

Hey, you know what ? I use Angular, and i like it.

My name is Benjamin Richard and i work in web industry since 2000. It makes a long time from now. I used to work on backend with PHP, Java or .Net using, most of the time, MVC pattern. MySQL, PostgreSQL, but also Oracle DB was my favourite databases. And when MeteorJs bring their awesome platform, i had a look at frontend technologies.

Why Angular ? In fact i can't really explain why i worked on Angular, more than React and VueJS. I tried Vue, and developed some applications with it. I liked it. But when it moved from v2 to v3 i didn't understood why they made it so complex, whereas its simplicity was the key part of Vue 1 & 2. So i looked at React and Angular. But, to my mind, Angular was far ahead React even if it was not the opinion of most of developers. To my mind, the fact that Angular bring everything that you need to build an app, is the main advantages. Yes, you can not choose your favorite Http library, your form management, etc. But each part of Angular are made to work well together.

Why not Angular ? maybe because it was hard to learn it.
Angular = Typescript + RxJS + the Framework
So you have to master each one to be efficient. And it's harder than mastering a template rendering library like React ;-p
But this time is over in 2024. You don't want RxJS ? use signal. Yes, with v16 Angular bring signal concept. in 2024 with v18 most of signals function was stable. and with v19 two new signals bring a new way of working with async resources. So now, you are able to use Angular without Observable. I would say that it's not a good idea, because they are really usefull, but if it's something you don't want, you can preserve yourself from this concept.

How to start ?

Since 2024, the Angular team has rebuild the website, so have a look at https://angular.dev the content is really impressive.

Then, you need to get NodeJS >v18.19.1 and you can install it somewhere (using docker or anything else) :

npm install -g @angular/cli

Now that you have the Angular cli, you can use it to start a project :

ng new my-new-project

You have to select some configuration like using a Server side rendering or not, using Sass, Scss, or whatever. And that's all.

It will create a folder 'my-new-project' with a simple home page. What's great with Angular, is that you can customize your project in the Angular.json file. The schematics part allows you to define how you want to work when you use the Cli to generate some code :
You want html and css in a single file component like Vue ? yes you can. You want to define the Change Detection Strategy ? yes you can.
Everything is under the node projects.my-new-project.schematics
And its default values are defined by using your answers from the 'ng new' command.
Ho, i forgot something : 'ng new' command has a lot of available parameters. But i will let you discover them for instance.

Now that you project is initialized, it's time to start it :

ng serve

Open a browser on http://localhost:4200 and that's it.

This article is over and next one will be about component creation.

See you !

[note] All articles use command from Angular v19*
[original post] https://medium.com/@rebolon/yet-another-angular-article-part-1-8f9ae6526189