Как добавить компонент загрузчика к конкретному элементу div в angular 8.? - PullRequest
Новая
       7

Как добавить компонент загрузчика к конкретному элементу div в angular 8.?

0 голосов
/ 05 мая 2020

Это мой ajax -loader.component. html

   `<div class="loadingplaceholder" *ngIf="isBusy">
        <label class="ajax-loader">
          <i class="fas fa-circle-notch fa-spin"></i>
          <span class="loading-data-text">Loading</span>
        </label>
    </div>`

Мне нужно добавить этот компонент-загрузчик в конкретную область, где данные загружаются не во всем разделе документа.

1 Ответ

0 голосов
/ 05 мая 2020

Вам нужно будет сделать ваш .loadingplaceholder absolute для этого и родительский элемент как relative для этого. 

.loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Теперь вы можете создать класс для элемента, в котором вы хотите показать your spinner; 

.loading-container {
    position: relative
}

Чтобы использовать его, вам просто нужно добавить свой loading-container класс в элемент, в котором вы хотите показать счетчик. 

<div class="loading-container">
    --------- This is area where I want to show spinner ----------
    <div class="loadingplaceholder" *ngIf="isBusy">
        <label class="ajax-loader">
          <i class="fas fa-circle-notch fa-spin"></i>
          <span class="loading-data-text">Loading</span>
        </label>
    </div>
</div>

Итак, приведенное выше решение будет работать хорошо, но у меня есть несколько предложений, чтобы следовать передовым методам:

Вместо создания loading-container класса или встроенного стиля я бы предложил использовать bootstrap class position-relative.

In angular мы должны создать компонент для повторяющегося пользовательского интерфейса. В вашем случае вы захотите использовать этот загрузчик во многих разных местах. Итак, здесь вы можете создать компонент, который принимает логический параметр как видимый.

...