DEV Community: Julie Gladden

Angular Form Array

Julie Gladden — Fri, 29 Nov 2024 23:51:30 +0000

Understanding Angular's FormArray

Angular's FormArray is a powerful tool in reactive forms (ReactiveFormsModule) that allows us to manage a dynamic set of form controls. Think of it as a flexible container for managing an array of form controls, particularly useful for forms where the number of inputs is variable, like a list of tasks, addresses, or phone numbers.

All code can be found here: AngularFormArrayTutorial - Github
Angular 19 Documentation: Reactive Forms Docs

What is FormArray?

A FormArray is similar to an array, but instead of storing regular values, it holds FormControl, FormGroup, or even other FormArray. Here's a breakdown:

FormControl: Manages a single value.
FormGroup: Manages a group of controls.
FormArray: Manages dynamic controls.

How to Use FormArray

Let’s explore a task management app example where FormArray handles dynamic tasks and their subtasks.

1. Initializing a FormArray

We start by creating a FormGroup containing a FormArray for managing tasks. Each task is represented as a FormGroup that includes a taskName FormControl and a subtasks FormArray.

constructor(private fb: FormBuilder) {
  this.tasksForm = this.fb.group({
    tasks: this.fb.array([]), // FormArray to manage tasks
  });
}

2. Accessing the FormArray

To make the FormArray easily accessible, we define a getter:


// Getter for the tasks FormArray
get tasks(): FormArray {
  return this.tasksForm.get('tasks') as FormArray;
}

 // Helper to get subtasks FormArray for a specific task
  subtasks(index: number): FormArray {
    return (this.tasks.at(index) as FormGroup).get('subtasks') as FormArray;
}

3. Adding New Controls Dynamically

To add a new task, we push a new FormGroup to the tasks FormArray. Each FormGroup includes:

A taskName FormControl.
A subtasks FormArray for nested subtasks.

addTask(taskName: string = '') {
  const taskGroup = this.fb.group({
    taskName: taskName || '', // Default to an empty string
    subtasks: this.fb.array([]), // Initialize an empty FormArray for subtasks
  });
  this.tasks.push(taskGroup); // Add the task to the tasks array
}

Section 4: Adding Subtasks

To add a subtask to a specific task, we retrieve the subtasks FormArray for that task and push a new FormControl:

/*Uses the subtasks helper to get the subtask array, and then adds the new subtask at the end of the array. You could provide a starting value with another input, but for simplicities sake, we are pushing an empty string.*/
addSubtask(taskIndex: number, subtaskName: string = '') {
  this.subtasks(taskIndex).push(this.fb.control(subtaskName || ''));
}

5. Removing Controls Dynamically

Removing tasks or subtasks with the the removeAt() method:

To remove a task:

removeTask(index: number) {
  this.tasks.removeAt(index);
}

//Uses the subtasks helper to get the subtask array, and then removes the subtask at the subtaskIndex
removeSubtask(taskIndex: number, subtaskIndex: number) {
  this.subtasks(taskIndex).removeAt(subtaskIndex);
}

6. Template for Dynamic Tasks and Subtasks

Now let’s take a look at the HTML template that binds to the FormArray we’ve created in the component.

<form [formGroup]="tasksForm" class="tasks-form">
  <div formArrayName="tasks" class="tasks-list">
    @for (task of tasks.controls; track task; let i = $index) {
    <div [formGroupName]="i" class="task-item">
      <!-- Task Name -->
      <div class="main-task">
        <mat-form-field appearance="outline" class="task-field">
          <input matInput placeholder="Task Name" formControlName="taskName" />
        </mat-form-field>
        <button
          mat-mini-fab
          color="warn"
          (click)="removeTask(i)"
          class="delete-task-btn"
        >
          <mat-icon>check</mat-icon>
        </button>
      </div>

      <!-- Subtasks -->
      <div formArrayName="subtasks" class="subtasks-list">
        @for ( subtask of subtasks(i).controls; track subtask; let j = $index )
        {
        <div class="subtask-item">
          <mat-icon class="arrow">arrow_right</mat-icon>

          <mat-form-field appearance="outline" class="subtask-field">
            <input matInput placeholder="Subtask Name" [formControlName]="j" />
          </mat-form-field>
          <button
            mat-mini-fab
            color="warn"
            (click)="removeSubtask(i, j)"
            class="delete-subtask-btn"
          >
            <mat-icon>check</mat-icon>
          </button>
        </div>
        }
        <!-- Add Subtask Button -->
        <button
          mat-raised-button
          color="primary"
          (click)="addSubtask(i)"
          class="add-subtask-btn"
        >
          Add Subtask
        </button>
      </div>
    </div>
    }
  </div>

  <!-- Actions -->
  <div class="form-actions">
    <button mat-raised-button color="primary" (click)="loadSampleTasks()">
      Load Sample Tasks
    </button>
    <button mat-raised-button color="accent" (click)="clearAllTasks()">
      Clear Tasks
    </button>
    <button mat-raised-button color="primary" (click)="addTask()">
      Add Task
    </button>
  </div>
</form>

<!-- Displays the forms current data in real time json format. Really helpful for debugging.-->
<pre>{{ tasksForm.value | json }}</pre>

Conclusion

The FormArray is an essential part of Angular's reactive forms when working with dynamic form controls. Whether you're building complex forms with nested controls or simple dynamic lists, FormArray provides a robust solution to handle the dynamic nature of your form controls in Angular.

Do you have an article you'd like to see? Let me know in the comments!

Angular + Module Federation remote import modules 👷‍♀️

Julie Gladden — Fri, 11 Aug 2023 03:09:18 +0000

When implementing Module Federation in Angular (specifically using the library @angular-architects/module-federation) you need to be careful of what modules you are importing in your remotes. Some of these will break the application, but the error handling can be spotty and unclear. This can also be affected by what you share between your shell and your remotes.

Here's what I've found to be some best practices.

Remove these from your remote modules:
BrowserAnimationsModule
BrowserModule
RouterModule.forRoot()

Instead you can use:
CommonModule
RouterModule.forChild()

Targeting forChild with your RouterModule will ensure your shell's router outlet is being used.

This next one is a little different, and will depend on your use case:

Whether you put the HttpClientModule in your remote modules will be dependent if you are using Http Interceptors and how you are using them.

If you are wanting to use a global interceptor in your shell project (Ex. A loading bar or spinner that fires on every API call regardless of whether or not it is in the shell or remote) then you should NOT use HttpClientModule in your remote project. If you have a HttpClientModule in a remote, it will ignore the shell's HttpClientModule in favor for the remote's. There could be a use case for this, so just be aware of what your needs are when importing this module.

If you have any questions or anything you'd like me to add, please comment down below! 💡💡💡

Angular + RXJS Behavior Subject

Julie Gladden — Fri, 24 Feb 2023 03:22:59 +0000

Hey guys,

Today I want to walk you through how I use RXJS's Behavior Subject.

First of all, what is it and what can you do with it?

It's an observable that you can use to store data and then emit that data everywhere that has subscribed to it.
The data can be updated from any component, which then in turns updates all the subscribers.
It has to have a starting value.
You can subscribe to it at any time.
You can unsubscribe from it at any time.

To figure this out, let's make a simple project that will allow us to share the name of a cat and subscribe to it.

First, create a service in your terminal.
ng g s cat-name

In cat-name.service.ts


/* This is our original source. If the value hasn't been otherwise
changed, this is the value you will get when you subscribe. */
nameSource = new BehaviorSubject<any>('Fluffy')

/* This takes our nameSource and turns it into an observable that
can be subscribed to. */
nameCurrent = this.nameSource.asObservable();

/* This is the function we will call that will allow us to update
the Cat's name. */
changeName$(name$) {
  this.nameSource.next(name$)
}

Note** The $ after a variable just denotes that it is an observable. It doesn't effect the function of the variable at all.

Now, in our cat.ts file (or any TS file you are going to be using the Behavior Subject's value in, or updating the value in...)


//Variable to store the Behavior Subject observable in...
catName;

constructor(private nameService: CatNameService) {}

ngOnInit() {
  this.nameService.nameCurrent.subscribe(name$ => {
      this.catName = name$,
      console.log(this.catName)
      //The logged name will be 'Fluffy'
    }
  )
}


//If I want to change the cat's name...
changeCatName() {
  this.nameService.changeName$('Stormy');
  console.log(this.catName)
  //The logged name will be 'Stormy'
}

After you call the 'changeName' function, since you are already subscribed, if you console.log 'this.catName', it will log as 'Stormy' instead of 'Fluffy'. Note that we did not implicitly change the catName variable. The changeName$ function emitted that value, and because we were already subscribed in our ngOnInit, we reassigned the variable in our subscription. Pretty cool, right?

Just remember, EVERYWHERE you are subscribed to 'nameCurrent' will update. EVERYWHERE.

Make sure to unsubscribe in places you don't want this to happen.
this.nameService.nameCurrent.unsubscribe()

Like always, there's more that you can do with Behavior Subject, so make sure to check out their documentation to get the full picture. I wanted to make this one short and sweet, so if you have any questions ask down below!

Thanks for reading,
Julie

Angular, Module Federation, and remote internal routing 🤯🤯🤯

Julie Gladden — Thu, 16 Feb 2023 02:20:49 +0000

Hey folks,

There's tons of content out there for Angular with Webpack's Module Federation, specifically for SPAs. Because, if we are being totally honest with ourselves, that's how it was designed to be. 🧠🧠🧠

However, we are just going to conveniently ignore that fact and have microfrontends that aren't quite so... micro. Besides, there's no one here to stop us, so let's do some things that maybe we shouldn't.

First things first, this article is going to assume you've done the hard work of setting up your Shell and your Remote (or Remotes).

Start with our routing in the shell, which lazy loads our remote. This should have been covered in any random tutorial on the internet.


shellRoutes = [
  {
    path: 'myRemote',
    loadChildren: () => 
        import('myRemoteApp/Module').then((m) => m.RouterModule)
  }
]

//In our imports array...
RouterModule.forRoot(shellRoutes, { useHash: true})

Then, in our remote


remoteRoutes = [
  {
    path: '', 
    component: MyHomeComponent
  },
  {
    path: 'list/:id', 
    component: MyRandomListComponent
  }
]

/* Also, be aware that when you use RouterModule, for the 
components in your remote to be rendered in the <router-outlet> 
in your shell, you must use RouterModule.forChild() */

//In imports array
RouterModule.forChild(remoteRoutes)

Now, we would assume that we can just use routing as normal from our remote. However, trying
this.router.navigate(['list/1'])
in our remote will cause issues.

What happens is instead of just navigating directly to that component, it replaces everything that was already in the url after our hash.

For example, instead of getting:

localhost:3000/#/myRemote/list/1

We end up with:

localhost:3000/#/list/1

So now, our shell's router doesn't know to be looking inside of the remote project for its paths.

Your remote doesn't know what path was set by the shell, since they don't communicate with each other, so it just overwrites and starts fresh with it's own path. Even if you do
this.router.navigate(['myRemote/list/1']), it won't work.
Since the remote doesn't speak with the shell, the shell can't find that remote internal path. The shell doesn't even realize you are trying to change paths.

Here's the workaround. Have the shell do the all the routing.
To do this, we are going to utilize a custom event, and an event listener.

In our remote:


myNavigationFunction() {
  const routeChangeEvent = new CustomEvent('childRouteChanged', {
    data: {
      remoteName: 'myRemote',
      routeName: 'myRemote/list' + this.id 
   },
 });

window.dispatchEvent(routeChangeEvent);

/* You may or may not need the data for remoteName, but it can be handy to have, so I pass it anyways. */

In our shell:


/* Listens for the remote to fire its event, and on firing, fires the function 'changeRoute()' */

@HostListener('window.childRouteChanged', ['&event'])
changeRoute(event) {
  this.router.navigate([event.data.routeName])
}

And there you go, you should have a functioning shell and remote relationship that allows you to trigger routing from your remote.

Hope you enjoyed this article,
Julie

Find the sum - Minibytes - Beginner Javascript Practice Questions #1

Julie Gladden — Fri, 10 Feb 2023 17:51:40 +0000

Hey, guys!

So currently, I'm giving a few coding lessons to some people in my life, and in doing so, I've been coming up with simple problems for them to solve.

The low difficulty allows you to start doing some real-world work, without the stress of building out an entire project on your own. It also has some guiding questions to help you get in the right mindset of thinking.

Do you want this to become a series? Leave a comment below!
Let me see your solutions as well!

Happy coding,
Jules

https://codepen.io/julesglad/pen/rNrEKXW

How to display nested data when using Angular + Firebase

Julie Gladden — Thu, 26 Jan 2023 22:59:25 +0000

Hello, everyone.

I've been working on a project recently, and I've been excited to try out Firebase as my backend.

I'm working on a project right now that's essentially an online 'practice log' for musicians. A way to track your practicing hours, skills, and even offer a few practice tools along the way.

Anyways, let's get into the project... When I started fetching my data that I'd stored in Firebase's realtime database, I noticed a glaring issue right away.

Instead of sending an an array inside of an array, the data sends back as objects of key value pairs that are nested inside of the array.

IMPORTANT TERM: KEY VALUE PAIR
Key -> { 0, 'Coding is hard' } <- Value
The key is 0, the value is 'Coding is hard'.
Key value pairs are beneficial for scalability, speed, and numerous other things.

Now, one thing to note, is that if you are looping through data in Angular, using an *ngFor, the data MUST be in an array.

This is how the data presents in the realtime database:

And here it is printed to the console:

You can see that the fields 'skills' and 'instruments' are not arrays. They are an object with multiple key value pairs.

My data from Firebase is being held in a variable called 'logList'.

logList: Log[];


myFunction() {
  this.logList.forEach((log) => {
        log.skills = Object.values(log.skills);
        log.instruments = Object.values(log.instruments);
      });
}

Target logList and get each item from its array separately using forEach.
Take only the value part of each key value pair using the javascript 'Object.values' method.

Easy!

The Object keys functions are so helpful!
Ex.
Object.values() gets the value out of the key value pair.
Object.keys() gets the key out of the key value pair.

Now my data looks like this:

You can see the array [] surrounding 'skills' and 'instruments' now, instead of object {}.

So now I can display this data like so:

I tried to keep this pretty simple, so if you have any questions specifically leave a comment below! Also, google is awesome and should be your best friend. :-)

What do you want to see next?

Thank you for reading! - Julie

What are services in Angular? And how in the world do I use them?

Julie Gladden — Tue, 17 Jan 2023 02:43:58 +0000

Hi folks,

Let's talk about services today. These guys are extremely useful for having code that is streamlined, reusable, and readable.

You might have services for different things, for example:

A service that holds all of your API calls.
A service that holds a bunch of constants, like URLs.
A service that holds a variable or observable, that other components can subscribe to read and use that data.
Using Rxjs Behavior Subject, you can even update and subscribe to the same variable in a service through many different components.

For initial setup, I would create a folder called 'services'.
Then, in your terminal pointed to that folder, you can add the command:

ng g s service-name

Service-name can be whatever you want it to be. Like, 'authentication' or 'api-calls'. It will end up being called 'service-name.service', so don't name it something like 'authentication-service', or else you'll end up with 'authentication-service.service'.

For today's purpose, let's have a service that has a constant and an API call.

Example:

export class ApiCallService { 

constructor(private http: HttpClient) {}

const url = www.hereisadomainname.com


getDataFromDatabase() {
return this.http.get(this.url + '/data')
}

}

Now, you can use these in whatever component you want.

Ex:

export class YourComponent {
myVariable; 

//The name after private can be whatever you want, you are just assigning the service's name here.
constructor(private service: ApiCallService) {}

// You can see here, that 'service' is targeting our ApiCallService, then we can pull any variable or function directly from the service for our use!
getData() {
this.service.getDataFromDatabase().subscribe(data => console.log(data)
}

ngOnInit() {
//this is going to print the url you have in your service. You could have other data stored, like an array or object. Then you can assign the value to a variable in your component.

console.log(this.service.url)
//or
this.myVariable = this.service.url
}

}

Hopefully you can see the usefulness of a service, especially when you have a lot of code that needs to be reused in many different places.

Please leave a comment if you have any Angular tutorial requests! I'd love to see what you want to know. :)

Thanks for reading,
Julie

HttpClient 'GET' - Angular Simplified

Julie Gladden — Sat, 17 Sep 2022 01:20:43 +0000

Hey, friends.

Today I want to break down Angular's method of calling APIs. I'll be doing an article for each CRUD operation, so keep your eye out and make sure to follow!
This is the basics, and you can find more info on Angular's website. I won't get into the nitty gritty of why and how things work here. As a beginner, sometimes too much information is a bad thing. So let's start simple and grow from there!

Step 1:

Time to import!

In your app.module file...

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, <-- add to imports here
  ],

In your .ts file...

import { HttpClient } from '@angular/common/http';

Step 2:

Next we need to add to our constructor.

In your .ts file...

constructor(private http: HttpClient) {}

Step 3:

Now it's time to call our API!

Here's our main functionality. Inside of the get parenthesis, we are going to put our URL or anything that needs to be sent over. Consider subscribe to be what actually plugs us in to the service. If you don't have it, we won't have the power to turn this function on. It'll give us back the data we need so we can use it elsewhere.

functionName() {
 this.http.get().subscribe()
}

Now add your URL to it.

myUrl = 'https://www.heythisiscool.com/1'
functionName() {
 this.http.get(myUrl).subscribe()
}

Next, you can do stuff in your subscribe parenthesis. You could console.log to see what you get back.

functionName() {
 this.http.get(myUrl).subscribe(data => {console.log(data)}
}

Or you can put data in a variable.

myVariable;

functionName() {
 this.http.get(myUrl).subscribe(data => {myVariable = data})
}

You can also do multiple things on subscribe. These things won't happen until the call is complete, so it's handy in many situations.

myVariable;

functionName() {
this.http.get(myUrl).subscribe(data => {
  myVariable = data,
  console.log(data),
  callAnotherFunction(),
  setAVariable = true
  }
}

There's many other things to cover with get requests, so many sure to follow for the nitty gritty in the future!

Best wishes,
Julie

Angular Child To Parent Communication - Simplified

Julie Gladden — Sat, 03 Sep 2022 23:50:00 +0000

I don't know about you all, but as a young developer, having things broken down into simple steps makes my brain feel some sort of way.

First off, let's talk about what makes a component a considered a parent or a child. Yes, I know, easy--but bear with me. I didn't get it at first, so maybe you are in the same boat I am.

Let's say you have two components, <app-parent> and <app-child>.

These components are usually made up of an .html, spec.ts, .css, and .ts file.

A parent component holds a child's html selector in the parent's html file.

parent.html

<h1>Hi this is the parent component, I hold the child component below.</h1>
<app-child></app-child>

OK, now that that's all sorted, let's pass some data.

STEP ONE - Let's output our data from the child.

In the child.ts file,

import { Output, EventEmitter } from '@angular/core'

@Output() variableEvent = new EventEmitter();

You can name it anything, but most people tag the word 'Event' to the end of their variable name. Don't forget to import @Output() and EventEmitter. Sometimes, if you auto import EventEmitter (and you aren't paying attention), it'll import from the wrong file, so make sure it's from @angular/core.

STEP TWO - Let's trigger it. You can trigger it on a (click) button function. Or when the component is initialized with onInit, or any number of ways you decide to trigger your function.

In the child.ts file,

functionName() {
this.variableEvent.emit(value)
}

Value is whatever you need it to be. A number, variable, boolean, ect.

STEP THREE

In the parent.ts file,

variable;

variableEvent($event) {
this.variable = $event;
}

You can name your function anything, but I like to keep it the same as the EventEmitter back in the child function. This function is triggered by the child function calling to it. So don't put it inside of another function.

STEP FOUR

Let's connect them together now.

In the parent.html file,

<app-child (variableEvent)="variableEvent($event)></app-child>

And there you go, you should have data passing from your child to your parent. Hope this helped another newbie like myself! There is more in depth knowledge on this on the angular documentation. Make sure you check it out!