Question: In my angular application I have two urls: `localhost:4200/report/11/view` and `localhost:4200/report/11/edit`.

In view page I divide the areas to components like this:
 --> render h2 with title.
 -> render ul-li with list of companies belong to this report.
 -> render p.

In my edit page I make those component editable:
 --> render input with title.
 -> render ul-li with list of companies belong to this report, and autocomplete to add to the list.
 -> render input.

My question is should I use seperate components for view and edit or inside the component I use ngIf to display or not the right part?

Answer: 
It looks like, when given a string like that, jQuery will only save the *contents of the body* into its collection:

```js
const data = `<!DOCTYPE html>
<html>
<head>
...
</head>
<body id="sustainable" class='sustainable'>
<div id="wrap">
    <main class="temp>
        <section class="sec01">
            ...
        </section>
    </main>
</div>
</body>
</html>`;
console.log($(data)[0]);
console.log($(data)[1]);
console.log($(data)[2]);
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```

(Check your browser console. It's selecting the text nodes around `#wrap`, and `#wrap` itself, but *not* the `<head>` or `<body>`)

You could use DOMParser instead, which will try to turn the *whole string* into a document, without trying to leave things out:

```js
const data = `<!DOCTYPE html>
<html>
<head>
...
</head>
<body id="sustainable" class='sustainable'>
<div id="wrap">
    <main class="temp>
        <section class="sec01">
            ...
        </section>
    </main>
</div>
</body>
</html>`;
const doc = new DOMParser().parseFromString(data, 'text/html');
console.log(doc.body.className);
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```

Another benefit of using DOMParser is that, unlike jQuery, it won't execute possibly-unsafe code in the HTML string:

```js
const data = `<!DOCTYPE html>
<html>
<head>
...
</head>
<body id="sustainable" class='sustainable'>
<img src onerror="alert('evil')">
</body>
</html>`;
$(data);
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery version, unsafe
```

```js
const data = `<!DOCTYPE html>
<html>
<head>
...
</head>
<body id="sustainable" class='sustainable'>
<img src onerror="alert('evil')">
</body>
</html>`;
const doc = new DOMParser().parseFromString(data, 'text/html');
console.log(doc.body.className);
```

```html
DOMParser version, safe
```
The following jQuery Won't work:

```
$(data).find('sustainable');

```

as the divs are top level elements and data isn't an element but a string, to make it work you need to use .filter

```
$(data).filter('sustainable.wrap');

```