Question: I have tried this alert but not getting result what exactly I want

Suppose my URL = <http://expense.test/admin/manageExpense.php>
I want alert (<http://expense.test/admin/>)

```
var base_url = window.location.origin + '/' + window.location.pathname.split ('/') [1] + '/';

```

Above query getting exact result which i want but when i alert below URL it's not exactly which i want.
Suppose my url is
<http://expense.test/admin/admin/admin/index.php>
when i alert with above query it's getting me same alert (<http://expense.test/admin/>) but I want alert (<http://expense.test/admin/admin/admin/>) , How can i achieve this. Any Help will be appreciated
Main focus how many folders with url but i want to exclude last filename from URL

Answer: 
I have taken a look at your stackblitz and I have modified it and made it working. You don't need to bind the formControlName with your products because you are not setting them from the frontend UI rather you are just selecting them. I have added a field named `added` in the class `ProductModel` and then I have just implemented the `change` event for the checkboxes to mark it true or false.

Also you can see how I am setting the value for the product. When you hit the `Load Products` button you are adding empty `FormGroup` but you should also set the `product` control inside it with product data. You can see that in the code how i am doing it inside the LoadProducts method

After that you can see in the loop for the products how i am getting the product field. The loop is actually giving us FormGroup we have to get product field value from it 

Here is the stackblitz that is doing the job.

<https://stackblitz.com/edit/angular-ivy-ohwv1v>

Particular you can note this part

```
if (this.productsByCategory) {
  this.productsByCategory.forEach(
  (product) => {
    const productForm: FormGroup = this.initProduct();
    productForm.controls.product.setValue(product);
      control.push(productForm);
    });
}

```

After creating the productFormGroup you should also set the product in it. like `productForm.controls.product.setValue(product);`

And then in the frontend you can see 

```
<div *ngFor="let p of getProducts(course); let j = index" [formGroupName]="j">
  <input type="checkbox" id="product{{i}}-{{j}}" [value]="p.value.product.added" (change)="p.value.product.added = !p.value.product.added"/>
  <label  for="product{{i}}-{{j}}">{{p.value.product.name}}</label>
</div>

```

you should have the value bind to the added attribute of the product and the name should be shown inside label from the product object too.

Hopefully this will help you proceed further.

> 
> And the second problem is that the labels of my checkboxes are not independent. If i add a new 'course' and that i select some products, the labels of all checkboxes in other courses are changed too.
> 
> 
> 

The above issue is resolved

> 
> I don't know how to be able to retrieve something like: 
> 
> 
> 

Rather than `productName: true/false` you have whole product object available and the `added` field will mark whether its `checked/unchecked`
courses is array of formGroup and inside that formGroup products is another formArray so you have to pass single course formGroup to getProducts method.

**component.html**

```
<div class="row" formArrayName="courses">
  <div *ngFor="let course of getCourses(menuForm); let i = index" [formGroupName]="i">
    <div class="...">
      <select class="form-control" formControlName="courseName">
        [value]="course"
        <option *ngFor="let course of courses">{{ course.name }}</option>
      </select>
      <button type="button" class="mt-2 btn btn-outline-dark" (click)="onLoadProducts(i)">
        Load Products
      </button>
      <div class="row" formArrayName="products">
        <div class="col-md-12" *ngFor="let product of getProducts(course); let j = index" [formGroupName]="j">
          <input class="form-check-input" type="checkbox" id="product{{ i }}-{{ j }}" formControlName="product" />
          <label class="form-check-label" for="product{{ i }}-{{ j }}">product</label>
        </div>
      </div>
    </div>
  </div>
</div>

```

Then use get method in FormGroup to get a child control.

**component.ts**

```
getCourses(form) {
    return form.get('courses').controls;
}

getProducts(form) {
    return form.get('products').controls;
}

```

[Example](https://stackblitz.com/edit/angular-ivy-e6h1fj)