blog.mgechev.com | - My personal blog | Blog library

What you are trying to do is called Content Projection in Angular. You can simply use ng-content to project anything.

The ultimately answer to the question, is yes - this will cause performance issues. And fortunately, it's actually easy to demonstrate, why, and how you might go about overcoming them.

For the purposes of illustration, I want you to copy a number of those mat-checkboxes, and insert them into your application somewhere.

Then, on the checkboxLabel method, I want you to put a console log at the very first line. Perform any interaction with the page, ideally check and uncheck one of the boxes.

Now, if you check your console, you might expect to see the checkboxLabel console log, appear once for every mat-checkbox. So if you put three in, you'd expect to see it, 3 times.

But if you followed those instructions exactly, you'll actually see the console log, many times depending on exactly what you kept in your test page and the set up of your project. And by many, we mean certainly 9+ times.

How Did This Happen?

Essentially, core to how Angular works, anytime there is a change in the DOM, every element with a method such as this has to be re-evaluated. It doesn't inherently cache the previous value and compare them, so it has to perform the calculation again, and return a result.

So if you had 20 divs with displayName() in them, that's many changes EVERY time there is a change. Which understandably causes a massive performance issue. When you think that most pages have much more than this displayed, you can see how people struggle to keep their applications performant, not because they're bad at coding - but because they might not understand exactly what's making it lag behind the scenes.

How Might You Overcome This?

Pipes.

If we instead convert our method into a pipe which can still utilize this method, we CAN take advantage of this caching method, and make our overall app performant.

Pipes will ONLY return a different result, and will only call their function, IF the input changes.

So for easiness sake: lets set up a dummy ts file, that has the following array.

try to add socket.io module in to your file using require('socket.io')

I'm not sure it's the solution for what you want to achieve, but there is Augury for debugging Angular.

augury.angular.io

I find it very useful in general.

There is some mistakes in your code in the way you are have defined your functions you need to make the following change :

typescript lib setting dom be included when developing an angular 4

Yes.

Angular is designed for the DOM.