Почему ngIf нарушает функциональность компонентов внутри него? Как мне вести себя в этом случае?

Question

Моя цель - иметь несколько кнопок-заполнителей для разделов, которые не были заполнены информацией. Заполненные разделы имеют вид карточки и имеют кнопку редактирования, которая либо активирует редактирование (через froala, редактор форматированного текста), либо мастер с вводом формы. Мое намерение состояло в том, чтобы скрыть карты, когда они не заполняются или не редактируются, а кнопки-заполнители просто отображают карты, а затем запускают редактирование, в результате чего появляется всплывающая подсказка. Это код:

[компонент карты - нарушение ng, если включено]

        <div class="mat-card margin-bottom-16" *ngIf="!!this.project.description || editingProjectDescription">
            <div class="section-header">
                <div class="section-header-title">
                    <span>{{ 'SHARED.LABEL.DESCRIPTION' | translate }}</span>
                </div>
                <div class="section-actions" *ainPermission="{ name: 'ProjectEdit', params: project }">
                    <button *ngIf="!isLightProject" mat-icon-button (click)="editDescription()">
                        <mat-icon aria-label="edit">edit</mat-icon>
                    </button>
                    <button *ngIf="!isLightProject" mat-icon-button [popper]="popper2Content"
                        [popperShowOnStart]="false" [popperTrigger]="'hover'" [popperApplyClass]="'tooltip'"
                        [popperHideOnClickOutside]="true" [popperHideOnScroll]="true" [popperPlacement]="'right'">
                        <i class="material-icons info-color">info</i>
                    </button>
                    <popper-content class="tooltip-text" #popper2Content>
                        <span class="tooltip-text">{{ 'PROJECT.TOOLTIPS.DESCRIPTION' | translate }}</span>
                    </popper-content>
                </div>
            </div>
            <div class="description mat-typography mat-body-1">
                <ain-inline-froala-editor #inlineFroalaDescription [data]="inlineFroalaDescriptionConfig"
                    [add]="!this.project.description"></ain-inline-froala-editor>
            </div>
        </div>

[код из компонента, содержащего карту]

export class ProjectViewGeneralComponent implements OnInit, OnDestroy {

    project: Project;
    ...
    editingProjectDescription = false;
    editingProjectPlan = false;

    @ViewChild('inlineFroalaDescription', { static: true }) inlineFroalaDescription: InlineFroalaEditorComponent;
    @ViewChild('inlineFroalaProjectPlan', { static: true }) inlineFroalaProjectPlan: InlineFroalaEditorComponent;

    ...

    editDescription(): void {
        this.inlineFroalaDescription.show();
    }

    showDescription(): void {
        this.editingProjectDescription = true;
    }

    get inlineFroalaDescriptionConfig(): Object {
        return {
            action: ProjectActions.UpdateProjectDescription,
            mode: 'simpleExtended',
            extraConfig: {
                placeholderText: this.translate.instant('PROJECT.TEXT.DESCRIPTION_PLACEHOLDER')
            },
            storeName: 'project',
            value: this.project.description,
            required: true,
            requiredProp: {
                id: this.project.id,
                valueProperty: 'description'
            }
        };
    }

    ...

[ошибка ] ERROR TypeError: Невозможно прочесть свойство show of undefined в методе editDescription, эта строка

this.inlineFroalaDescription.show();

В основном 'inlineFroalaDescription' перестает существовать.