Skip to content

Commit f719712

Browse files
FruitsdevFruitsdev
committed
essential component new topics added
1 parent ef83128 commit f719712

File tree

1 file changed

+223
-16
lines changed

1 file changed

+223
-16
lines changed

‎src/app/angular/components/ng-essentials/ng-essentials.html‎

Lines changed: 223 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,17 @@ <h2 class="note-heading">Custom Component (Standalone Project)</h2>
2626

2727
<li>
2828
<strong>Import the required module</strong>
29-
<pre class="note-code"><code>import &#123; Component &#125; from '&#64;angular/core';</code></pre>
29+
<pre
30+
class="note-code"
31+
><code>import &#123; Component &#125; from '&#64;angular/core';</code></pre>
3032
</li>
3133

3234
<li>
3335
<strong>Use the <code>&#64;Component</code> decorator</strong>
3436
<ul class="note-list">
3537
<li>
36-
This decorator provides metadata for the component, such as its
37-
selector, template, and styles.
38+
This decorator provides metadata for the component, such as its selector, template, and
39+
styles.
3840
</li>
3941
</ul>
4042
</li>
@@ -43,17 +45,14 @@ <h2 class="note-heading">Custom Component (Standalone Project)</h2>
4345
<strong>Define a selector</strong>
4446
<ul class="note-list">
4547
<li>
46-
The selector tells Angular which elements on the screen should be
47-
controlled or replaced by our custom component.
48+
The selector tells Angular which elements on the screen should be controlled or replaced
49+
by our custom component.
4850
</li>
4951
<li>
50-
The convention is to use at least two words separated by a dash
51-
(Example: <code>app-header</code>).
52-
</li>
53-
<li>
54-
Using a single-word selector may conflict with built-in HTML
55-
elements.
52+
The convention is to use at least two words separated by a dash (Example:
53+
<code>app-header</code>).
5654
</li>
55+
<li>Using a single-word selector may conflict with built-in HTML elements.</li>
5756
</ul>
5857
</li>
5958

@@ -62,18 +61,226 @@ <h2 class="note-heading">Custom Component (Standalone Project)</h2>
6261
<ul class="note-list">
6362
<li>The template defines the HTML structure of the component.</li>
6463
<li>We can define it using:</li>
64+
<li>A string (inline template) where we write HTML directly.</li>
65+
<li>A separate file using <code>templateUrl</code>, where we provide the file path.</li>
66+
</ul>
67+
</li>
68+
69+
<li>
70+
<strong>Set the standalone property</strong>
71+
<ul class="note-list">
72+
<li>Depending on the Angular version:</li>
73+
<li>Angular 19+: The standalone property is automatically set to true.</li>
74+
<li>Earlier versions: You must manually set standalone: true.</li>
75+
<li>For module-based components, set it to false.</li>
76+
</ul>
77+
</li>
78+
79+
<li>
80+
<strong>Import the component into app.component.ts</strong>
81+
<ul class="note-list">
82+
<li>
83+
To use the HeaderComponent, import it in app.component.ts and include it in the
84+
template.
85+
</li>
86+
<pre class="note-code">
87+
<code>
88+
import &#123; Component &#125; from '&#64;angular/core';
89+
import &#123; HeaderComponent &#125; from './header.component';
90+
91+
&#64;Component(&#123;
92+
selector: 'app-root',
93+
standalone: true,
94+
imports: [HeaderComponent],
95+
templateUrl: './app.component.html',
96+
styleUrls: ['./app.component.css']
97+
&#125;)
98+
</code>
99+
</pre>
100+
</ul>
101+
</li>
102+
103+
<li>
104+
<strong>Some Angular Features</strong>
105+
<ul class="note-list">
65106
<li>
66-
A string (inline template) where we write HTML directly.
107+
Inside a component we can create variables and assign a value to it without using var,
108+
let and const keywords
67109
</li>
110+
<li>We a create regular variable outside the class and do regular javascript there</li>
111+
<pre class="note-code">
112+
<code>
113+
import &#123; Component &#125; from '&#64;angular/core';
114+
import &#123; DUMMY_USERS &#125; from '../../dummy-users';
115+
116+
const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length);
117+
118+
&#64;Component(&#123;
119+
selector: 'app-user',
120+
standalone: true,
121+
templateUrl: './user.component.html',
122+
styleUrl: './user.component.css',
123+
&#125;)
124+
export class UserComponent &#123;
125+
selectedUser = DUMMY_USERS[randomIndex];
126+
&#125;
127+
</code>
128+
</pre>
129+
<li>We can also import a normal .ts file and use there values in our component</li>
130+
<pre class="note-code">
131+
<code>
132+
export const DUMMY_USERS = [
133+
&#123;
134+
id: 'u1',
135+
name: 'Jasmine Washington',
136+
avatar: 'user-1.jpg',
137+
&#125;,
138+
&#123;
139+
id: 'u2',
140+
name: 'Emily Thompson',
141+
avatar: 'user-2.jpg',
142+
&#125;,
143+
];
144+
</code>
145+
</pre>
68146
<li>
69-
A separate file using <code>templateUrl</code>, where we provide the
70-
file path.
147+
String interpolation – Display dynamic content. If we add
148+
<strong>private</strong> before the property, we can access it only inside the class. If
149+
we do not add <strong>public</strong>, it will be <strong>public by default</strong>. We
150+
can use other JavaScript expressions inside the interpolation <span>&#123;</span
151+
><span>&#123;</span> <span>&#125;</span><span>&#125;</span>
71152
</li>
153+
154+
<pre class="note-code">
155+
<code>
156+
export class UserComponent &#123;
157+
private selectedUser = DUMMY_USERS[randomIndex];
158+
&#125;
159+
</code>
160+
</pre>
161+
<pre class="note-code">
162+
<code>
163+
&lt;p&gt;<span>&#123;</span><span>&#123;</span> selectedUser.name <span>&#125;</span><span>&#125;</span>&lt;/p&gt;
164+
</code>
165+
</pre>
166+
167+
<li>
168+
Property Binding - Dynamic usage of html attribute. We can concatenate the src to get
169+
dynamic path
170+
</li>
171+
<pre class="note-code">
172+
<code>
173+
&lt;img [src]="<span>&#123;</span><span>&#123;</span> selectedUser.avatar <span>&#125;</span><span>&#125;</span>" alt="user-image" /&gt;
174+
</code>
175+
</pre>
72176
</ul>
73177
</li>
74178

75179
<li>
76-
<strong>Set the standalone property</strong>
180+
<strong>Attribute Binding</strong>
181+
<ul class="note-list">
182+
<li>
183+
In Property Binding, Angular binds values to DOM properties, not attributes. For
184+
example:
185+
</li>
186+
<pre class="note-code">
187+
<code>
188+
&lt;img [src]="someSrc"&gt;
189+
</code>
190+
</pre>
191+
<li>Here, src is bound to the DOM property, not the HTML attribute.</li>
192+
<li>
193+
However, some attributes (like ARIA attributes) don’t have matching DOM properties. In
194+
such cases, Attribute Binding is used:
195+
</li>
196+
<pre class="note-code">
197+
<code>
198+
&lt;div
199+
role="progressbar"
200+
[attr.aria-valuenow]="currentVal"
201+
[attr.aria-valuemax]="maxVal"&gt;
202+
&lt;/div&gt;
203+
</code>
204+
</pre>
205+
<li>
206+
Adding attr. before an attribute tells Angular to bind the **HTML attribute instead of a
207+
property. This is useful for ARIA, colspan, tabindex, and other attributes without
208+
corresponding properties.
209+
</li>
210+
</ul>
211+
</li>
212+
213+
<li>
214+
<strong>Typescript and Javascript features in classes [get]</strong>
215+
<ul class="note-list">
216+
<li>
217+
This is useful for dynamically displaying user profile images without hardcoding file
218+
paths.
219+
</li>
220+
<pre class="note-code">
221+
<code>
222+
get imagePath() &#123;
223+
return './assets/users/' + this.selectedUser.avatar;
224+
&#125;
225+
</code>
226+
</pre>
227+
228+
<pre class="note-code">
229+
<code>
230+
&lt;div&gt;
231+
&lt;button&gt;
232+
&lt;img [src]="imagePath" [alt]="selectedUser.name" /&gt;
233+
&lt;span&gt;
234+
<span>&#123;</span><span>&#123;</span> selectedUser.name <span>&#125;</span><span>&#125;</span>
235+
&lt;/span&gt;
236+
&lt;/button&gt;
237+
&lt;/div&gt;
238+
</code>
239+
</pre>
240+
<li>Zone.js notifies Angular about user events, expired timers etc.</li>
241+
</ul>
242+
</li>
243+
244+
<li>
245+
<strong>Signals</strong>
246+
<ul class="note-list">
247+
<li>
248+
A Signal is an object that stores a value (any type of value, including nested objects)
249+
There are two approaches for update state
250+
</li>
251+
<strong>Option 01:</strong>
252+
<li>Relying on Zone.js & Angular’s changes detection mechanism</li>
253+
<li>Works automatically, no special instruction mechanism</li>
254+
<li>Supports since Angular 2</li>
255+
<strong>Option 02:</strong>
256+
<li>Using Signals to notify angular about value changes & required Ui updates</li>
257+
<li>Requires usage & special “signal” instruction & code</li>
258+
<li>Supported since angular 16</li>
259+
<strong>How to use Signals</strong>
260+
<pre class="note-code">
261+
<code>
262+
import &#123; Component, signal &#125; from '&#64;angular/core';
263+
</code>
264+
</pre>
265+
<li>We need to call the signal to access the property inside it</li>
266+
<pre class="note-code">
267+
<code>
268+
selectedUser = signal(DUMMY_USERS[randomIndex]);
269+
270+
imagePath = computed(() =&gt; './assets/users/' + this.selectedUser().avatar);
271+
272+
get imagePath() &#123;
273+
return './assets/users/' + this.selectedUser().avatar;
274+
&#125;
275+
276+
onSelectUser() &#123;
277+
const randomIndex = Math.floor(Math.random() * DUMMY_USERS.length);
278+
this.selectedUser = signal(DUMMY_USERS[randomIndex]);
279+
&#125;
280+
</code>
281+
</pre>
282+
283+
</ul>
77284
</li>
78285
</ol>
79286

@@ -84,4 +291,4 @@ <h2 class="note-heading">Custom Component (Standalone Project)</h2>
84291
</p>
85292
</div>
86293
</div>
87-
</section>
294+
</section>

0 commit comments

Comments
 (0)