Tengo una plantilla HTML similar a la siguiente

 <div id="mainId"> <div> <custom-element> <div> <p></p> <p></p> <p></p> ....... <p></p> </div> </custom-element> </div> </div>

Me gustaría borrar todos los elementos <p> dentro de mainId , intenté obtener todas las etiquetas de párrafo usando querySelectorAll en JavaScript como se muestra a continuación

 document.querySelectorAll('#mainId > div > custom-element > div > p')

pero, ¿hay alguna otra forma en Angular de obtener todos los nodos descendientes usando el id mainId anterior y borrar todos los párrafos debajo de él?