How do I have a checkbox checked by default in Angular with NgModel?

Question

Hi I am trying to have the first value in my checkbox checked by default. How can I have it checked and assigned with it's value on opening the page?

This is my HTML page

<fieldset>
            <legend class="text__bold">Choose Screen Size</legend>
            <ng-container *ngFor="let viewport of viewports; let i = index" formArrayName="viewport">
                <input type="checkbox" class="check--box" name="viewport{{i}}" id="{{viewport.value}}"
                    [value]="viewport.value" [formControlName]="i" ng-checked="true">
                <label for="{{viewport.value}}">{{ viewport.value }}</label>
            </ng-container>
        </fieldset>

Typescript file:

public ngOnInit(): void {
    this.urlForm = this.createForm();
    const checkboxControl = this.urlForm.controls.viewport as FormArray;

    this.subscription = checkboxControl.valueChanges.subscribe(() => {
        checkboxControl.setValue(
            checkboxControl.value.map((value, i) =>
                value ? this.viewports[i].value : ''
            ),
            { emitEvent: false }
        );
    });
}