Bootstrap Navbar collapse not working properly angular6 - html

Question

I copied from bootstrap's site. But doesnt work me i cant figure out. Can you help me why. I am trying to fix it for hours. I want to make like menu button there also dropdowns not working properly. I copied bootstrap files to my project folder and use code to head of html file to implent them. Any help would be appreciated.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class= "container" >
<div class="pos-f-t" style="width: 202px">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4" style="width: 202px">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<div class="border bg-danger border-dark" style="height:2cm; width : 5.35cm; margin-bottom: -2px;font-weight: bold ">
<div class = "row" style="padding-left: 0.4cm" >
<p style="font-size: 20px">{{y}}</p>
<p style="font-size: 10px">{{z}}</p>
</div>
<div class ="row" style="padding-left: 0.4cm">
<p style="font-size: 20px; ">{{x}}</p>
<p style="font-size: 20px; ">{{contr}}</p>
<p style="font-size: 20px; margin-top: 0.7cm;">{{sum}}</p>
</div>
</div>
<div class ="border bg-black border-danger" style="width: 5.3cm;">
<div class ="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group" aria-label="Justified button group">
<input type ="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="getPast()" value="M" >
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="makeDivided()" value="⅟x">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="root()" value="√">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="square()" value="a²">
</div>
</div>
</div>
<div class="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clear()" value="CE">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clearAll()" value="C">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="delete()" value="←">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="division()" value="/">
</div>
</div>
</div>
<div class ="row" style="padding-left: 0.4cm">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('1')"> 1 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('2')"> 2 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('3')"> 3 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="add()" value="+" >
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class = "btn-group btn-group-justified" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('4')"> 4 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('5')"> 5 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('6')"> 6 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="substract()" value="-">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="btn-group" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('7')"> 7 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0 " (click)="getValue('8')"> 8 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('9')"> 9 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="multiple()" value="*">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="changeMark()" value="∓">
<button class="btn btn-danger border border-danger rounded-0 border-top-0" (click)="getValue('0')">0</button>
<button class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="addKama()" >,</button>
<input class="btn btn-dark border border-danger rounded-0 border-top-0" type="button" (click)="total()" value="=">
</div>
</div>
</div>
</div>
</div>

Answer 1

You just need to include jquery cdn to get it working
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.3.1.slim.js"
integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class= "container" >
<div class="pos-f-t" style="width: 202px">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4" style="width: 202px">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<div class="border bg-danger border-dark" style="height:2cm; width : 5.35cm; margin-bottom: -2px;font-weight: bold ">
<div class = "row" style="padding-left: 0.4cm" >
<p style="font-size: 20px">{{y}}</p>
<p style="font-size: 10px">{{z}}</p>
</div>
<div class ="row" style="padding-left: 0.4cm">
<p style="font-size: 20px; ">{{x}}</p>
<p style="font-size: 20px; ">{{contr}}</p>
<p style="font-size: 20px; margin-top: 0.7cm;">{{sum}}</p>
</div>
</div>
<div class ="border bg-black border-danger" style="width: 5.3cm;">
<div class ="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group" aria-label="Justified button group">
<input type ="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="getPast()" value="M" >
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="makeDivided()" value="⅟x">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="root()" value="√">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="square()" value="a²">
</div>
</div>
</div>
<div class="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clear()" value="CE">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clearAll()" value="C">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="delete()" value="←">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="division()" value="/">
</div>
</div>
</div>
<div class ="row" style="padding-left: 0.4cm">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('1')"> 1 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('2')"> 2 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('3')"> 3 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="add()" value="+" >
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class = "btn-group btn-group-justified" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('4')"> 4 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('5')"> 5 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('6')"> 6 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="substract()" value="-">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="btn-group" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('7')"> 7 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0 " (click)="getValue('8')"> 8 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('9')"> 9 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="multiple()" value="*">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="changeMark()" value="∓">
<button class="btn btn-danger border border-danger rounded-0 border-top-0" (click)="getValue('0')">0</button>
<button class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="addKama()" >,</button>
<input class="btn btn-dark border border-danger rounded-0 border-top-0" type="button" (click)="total()" value="=">
</div>
</div>
</div>
</div>
</div>