document.getElementById().setAttribute();

Ionic Framework ionic-v3
21

@Sujan12 Tab2 are in fact indirectly relevant. I finally found the problem after a beer. Basically I’m using infinite scroll, so each time I switch tabs, the “items” are loaded again, and the way Angular processes them in HTML is by simply creating a new set of HTML code with the exact same IDs. So the getElementById() works perfectly well, but ONLY on the first set of HTML elements with these IDs it finds, the 2nd/3rd and so on (depending on how many times you flip between tabs) are dismissed! I think this is just how HTML works.

So now that we have finally identified the problem, I got that Angular attributes will be applied to all copies of my “items”. I’ll test it now and report shortly.

22

One last time: You should do it with Angular, and not use document.getElementById() at all. Then this is all moot.

2 Likes
23

I did it both with Angular and document.getElementById(), all the same thing.

the issue here was the fact that infinite scroll generates new (copy) code each time you do a getRootNav(), and each of those elements must have a unique ID (not the same one as was for example in the first instance of the code). Then both/any option works like a charm!

Many thanks to all for pitching in ideas and suggestions!!!

24

How did you do it with Angular?

The good thing here should be that the IDs don’t matter because all the instances are just bound to the same variable. Doesn’t matter if this is present once are twelve times.

1 Like
25

I’m sure everybody is really tired of hearing me say this over and over, but it is really not “the same thing”. Whatever language or framework or stack you are working with, it is absolutely crucial that you make every possible effort to tailor your code to be idiomatic to that environment. Whether you are a lone wolf or working as part of a team, whether you or somebody else is going to be maintaining the code, this is one of the most important things you should keep in mind in every moment.

If you can achieve “equivalent” results with Angular property/attribute bindings and direct DOM manipulation (such as document.getElementById()), it is imperative that you as a proficient Angular programmer choose the former. Every single time.

1 Like
26

Absolutely agree with you! Except with one thing, I’m not (yet) a proficient Angular programmer. Actually I’ve just started programming altogether a few months ago like 2 hours every week, and since 1 week doing it full it. So hopefully in some 6 months I’ll get there. *))

27

I did it as follows:

[class.yourVariable]="your_class_if_variable_is_true"

yourVariable is then manipulated to one’s heart content.

In my specific case I’ve got several control variables, but the idea is the same.

28

u just create classVariable array
and change class on dynamic where to execute the classvaribel array