render angular component inside swiper appendSlide()

I am trying to load my angular component inside swiper.appendSlide like this

var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    swiper.appendSlide('<div class="swiper-slide">Slide 1</div>')
    swiper.appendSlide('<div class="swiper-slide"><app-Hello-Component></app-Hello-Component></div>')

It shows me two slides but second slide is empty and do not render my component app-Hello-Component. What should i do if i want to append slides dynamically with angular components inside swiper-slide?