I have HTML template similar to below

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

I would like to clear all the <p> elements inside the mainId, I tried getting all the paragraph tags using querySelectorAll in JavaScript as shown below

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

but, is there any other way in Angular to get all the descendent nodes by using above id mainId and clear all paragraphs under it?