?? ????? ?? ???????? ???? ?? ? ??????, ??? ????, ?? ??? ???? ?? ? ??????. Angular? ??? ??? Bootstrap 5? ????? ??? ??? ???? ???? ???? ?? ???? ???? ???? ????? ???? ?? ????? ????? ?? ? ????.

? ?? ?????? Angular? Bootstrap 5? ? ??? ???? ????, ????? ????, ???? ?? ????? ???? ??? ?????.

Bootstrap 5?? Angular? ???? ??? ??????

Angular? ?

Angular? ?? ?? ??? ??????(SPA)? ??? ? ??? ??? TypeScript ?? ????????. ?? ????? ???? ??? ?? ?? ??? ?????.

• ?? ?? ?? ????: ??? ??? ??? ?? ??? ??? ??????.
• ??? ??? ???: UI? ?? ?? ???? ?????.
• ??? ??: ??? ? API? ???? ???? ??? ?????.
• ??? ? ??: ?? ???? ??? ????? ??? ??? ??????.
• RxJS? ??? ??? ?????: ??? ??? ??? ???? ?????.

? ????? 5? ??????

Bootstrap 5? ?? ?? ?? ????? ????? ? ??? ?? ??? ??? ?? ?? ? ???? ??? ?????. ?? ?? ??? ????:

• ??? ???: ????? ?? ??? ???? ????? ??? ?? ??? ???? ???????.
• Flexbox ? ??? ???: ??? ????? ???? ?? ??? ?????.
• ??? ??: ???? ?? ??, ??, ??? ?? ??? ? ????.
• ?? ??: Bootstrap 5?? jQuery ???? ???? Angular?? ??? ??????.

Angular? Bootstrap 5 ??? ??

1. ??? ??: Angular? CLI? Bootstrap? ?? ??? ?? ??? ?? ???? ??? ?????.
2. ???: Bootstrap? ??? ???? ?????? ???? ??? ???? ?????.
3. ???: Angular? ??? ?? ??? Bootstrap? ??? ??? ?? ??? ???? ?? ??? ? ????.
4. ???? ? ???: Angular? Bootstrap 5? ?? ?? ????? ????? ????.

???? ??

1??: Angular ??

Angular CLI? ???? ??? Angular ??????? ??? ??? ?????.

npm install -g @angular/cli
ng new admin-dashboard
cd admin-dashboard

2??: ????? 5 ??

npm? ?? Bootstrap 5 ??:

npm install bootstrap

???? Bootstrap? CSS ? JavaScript ??? ?????angular.json ??? ???????.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

3??: ?? ??

??????? ???? Bootstrap? ????? ?????? ?????.

ng serve

src/app/app.comComponent.html? ??? ??? ???? ?????? ???? ? ????.

<button>




<hr>

<h2>
  
  
  <strong>Building the Admin Dashboard</strong>
</h2>

<h3>
  
  
  <strong>Dashboard Layout</strong>
</h3>

<p>A typical admin dashboard includes:</p>

<ol>
<li><strong>Sidebar Navigation</strong></li>
<li><strong>Top Navbar</strong></li>
<li><strong>Main Content Area</strong></li>
<li><strong>Footer</strong></li>
</ol>

<p>We’ll build each component step by step.</p>


<hr>

<h3>
  
  
  <strong>Step 1: Create the Sidebar Navigation</strong>
</h3>

<p>The sidebar serves as the primary navigation for the dashboard.</p>

<h4>
  
  
  <strong>HTML Template (sidebar.component.html):</strong>
</h4>



<pre class="brush:php;toolbar:false"><nav>



<h4>
  
  
  <strong>Styling (sidebar.component.css):</strong>
</h4>



<pre class="brush:php;toolbar:false">nav {
  width: 250px;
  position: fixed;
}
.nav-link:hover {
  background-color: #495057;
  border-radius: 5px;
}

2??: ?? Navbar ??

?? ?? ????? ??? ??? ??, ?? ?? ?? ?? ??? ?? ???? ?????.

HTML ???(navbar.comComponent.html):

<nav>




<hr>

<h3>
  
  
  <strong>Step 3: Main Content Area</strong>
</h3>

<p>The content area is where charts, tables, and other dashboard components are displayed.</p>

<h4>
  
  
  <strong>HTML Template (dashboard.component.html):</strong>
</h4>



<pre class="brush:php;toolbar:false"><div>




<hr>

<h3>
  
  
  <strong>Step 4: Footer</strong>
</h3>

<p>Add a footer to display information such as copyright or version details.</p>

<h4>
  
  
  <strong>HTML Template (footer.component.html):</strong>
</h4>



<pre class="brush:php;toolbar:false"><footer>




<hr>

<h2>
  
  
  <strong>Adding Interactive Components</strong>
</h2>

<h3>
  
  
  <strong>1. Charts</strong>
</h3>

<p>Integrate charts using popular libraries like Chart.js or ngx-charts.</p>

<h4>
  
  
  Install Chart.js:
</h4>



<pre class="brush:php;toolbar:false">npm install chart.js

?? ?? ??:

???? ????? ??? ?????.

<canvas>



<p>In the component’s TypeScript file (dashboard.component.ts):<br>
</p>

<pre class="brush:php;toolbar:false">import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  ngOnInit() {
    new Chart("myChart", {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March'],
        datasets: [{
          label: '# of Sales',
          data: [10, 20, 30],
          backgroundColor: ['#007bff', '#28a745', '#ffc107']
        }]
      }
    });
  }
}

2. ??? ???

Bootstrap 5? ??? ???? ???? ???? ????? ??? ? ????.

<???>




<hr>

<h2>
  
  
  <strong>??</strong>
</h2>

<p>Angular? ??? ?????? Bootstrap 5? ???? ??? ???? ???? ??? ???? ???? ??? ?? ????? ?? ? ????. Angular? ??? ????? ???? ???? ?? Bootstrap? ??? ??? ?? ??? ???? ????? ??????. ?? ? ???? ??? ??? ? ??? ????? ????? ? ??? ?? ??????? ?? ???? ????? ???? ? ??????.</p>

<p>??</p>


          

            
        

? ??? Angular ? Bootstrap 5? ???? ??? ??? ?? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!