අපගේ Counter App එකට අවශ්ය HTML ව්යුහය Bootstrap සමඟ නිර්මාණය කරමු.
පළමුව, අපගේ Angular project එකට Bootstrap CSS සම්බන්ධ කරගත යුතුය. `src/index.html` ගොනුව open කර, `<head>` tag එක තුලට පහත `<link>` tag එක ඇතුළත් කරන්න.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
දැන්, `src/app/app.component.html` ගොනුවේ ඇති සියල්ල මකා දමා, පහත HTML කේතය එයට ඇතුළත් කර save කරන්න.
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card text-center">
<div class="card-header">
Angular Counter App
</div>
<div class="card-body">
<h1 class="display-1">0</h1>
</div>
<div class="card-footer">
<button class="btn btn-success me-2">Plus (+)</button>
<button class="btn btn-warning me-2">Reset</button>
<button class="btn btn-danger">Minus (-)</button>
</div>
</div>
</div>
</div>
</div>
දැන් browser එක බැලූ විට, ඔබට අලංකාර Counter UI එකක් දැකගත හැකි වනු ඇත. නමුත් තවමත් බොත්තම් ක්රියා නොකරයි. එය ඊළඟ පියවරේදී සකස් කරමු.
⬅️ මුල් පිටුවට