How Angular works | Kara Erickson | #AngularConnect
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about what Angular does under the hood, such as compilation output, bootstrapping, the DOM and change detection.
Recommended by 3 people across 4 different months, 2019 to 2023.
What it is
Kara Erickson, tech lead of Google's Angular framework team, explains Angular's internals at AngularConnect 2019. She covers how the compiler works and what it produces, component definitions, application bootstrap, change detection and queries, with context on the Ivy rendering engine.
What people said
Strong rec ForestG · 2019-11 · Stack Overflow · on “How Angular builds and runs”
Might be late for this answer, but there have been a really good talk recently about this topic, which starts from a beginner viewpoint and goes in depth. Instead of trying to summarize or point out misinformation in this thread with my words, I'll just link the video by Kara Erickson: How Angular works [this video] . She is the tech lead on the Angular framework, and does a really good presentation on: what are the main parts of the Angular framework how does the compiler work, what does it produce what is a "Component definition" What is an application bootstrap, how does it work
Recommends ForestG · 2020-10 · Stack Overflow · on “How do I access the component object of the child components I render in a list?”
I recommend that you look up how Angular Change Detecion works, what is the purpose of Zone.js, and how Angular enables you to DO manipulate the DOM, but not directly you see... [this video]
Recommends Raphaël VO · 2021-02 · Stack Overflow · on “Where`s the generated javascript code of my Angular app for event binding?”
I recommend you to see this [this video] to understand how Angular works behind the scene. The reference for your button is generated by Angular itself, it helps to encapsulate your css logic inside for your component
Recommends Danish Aziz · 2023-07 · Stack Overflow · on “Does Angular have the equivalent of React's Virtual DOM?”
Angular has something called L-view or logical view. During the template creation stage, using the component definition created during the compilation stage, the HTML template is replicated by creating each element as per the HTML(they don't use innerHTML directly). As each of these elements gets created, they are pushed into the L-View along with their binding and directive info. L-view is an angular internal data structure which is used to store the DOM and their attributes and then it is used to track these elements and update them during change detection in an efficient manner. If you are looking for something similar to what the goal of VDOM is in Angular, then this is the thing. Note:
Cites dman · 2020-12 · Stack Overflow · on “ElementRef and @ViewChild, is not recommended?”
I disagree with using the DOM directly risks XSS attacks. Afterall, Angular runtime [this video] is doing so! Also, whatever is given to the browser from the server the client solely owns. Nothing can intercede between server and the browser. Someone would have to be at the clients house and type in a malicious parameter in the client's url. That param would then have to be inserted in a input box. Someone would actually have to modify the source code on the server side to call untrusted code. At that point(point #2), you have much bigger issues with server integrity. Point is, modifying the dom directly is what every website does(DOM parses html) and Angular runtime does it extensively since it