As a newcomer to this community with basic English proficiency, I hope to communicate effectively. My journey into learning Angular 2 has led me to a specific question:
I've set up a keyboard with four spans above it, each intended to hold a digit that corresponds to a key on the keyboard. Whenever one of these keys (each represented by a div) is pressed, I'd like the respective number to display in one of the spans. However, I'm unsure how to achieve this functionality. Additionally, after inputting four numbers and filling the spans, I aim to have the text above the spans change.
The HTML structure:
<div class="container-fluid fixed-heading">
<div class="back-button">
<img src="/assets/images/icon_arrow_left.png" (click)="back()" />
</div>
<app-main-app-header [heading]="'SETTINGS.SECURITY.PIN.HEADING'">{{"SETTINGS.SECURITY.PIN.HEADING"|translate}}</app-main-app-header>
</div>
<div class="container-fluid component">
<div class="row pin text-center">
<div>
<span>Here I would like to have the text</span>
</div>
<div class="container-fluid">
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
<div class="col-xs-3">
<span></span>
<div class="line"></div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 cursor-pointer">
<span>1</span>
<p> </p>
</div>
<div class="col-xs-4 cursor-pointer">
<span>2</span>
<p>ABC</p>
</div>
<div class="col-xs-4 no-border-right cursor-pointer">
<span>3</span>
<p>DEF</p>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 cursor-pointer">
<span>4</span>
<p>GHI</p>
</div>
<div class="col-xs-4 cursor-pointer">
<span>5</span>
<p>JKL</p>
</div>
<div class="col-xs-4 no-border-right cursor-pointer">
<span>6</span>
<p>MNO</p>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 cursor-pointer">
<span>7</span>
<p>PQRS</p>
</div>
<div class="col-xs-4 cursor-pointer">
<span>8</span>
<p>TUV</p>
</div>
<div class="col-xs-4 no-border-right cursor-pointer">
<span>9</span>
<p>WXYZ</p>
</div>
</div>
<div class="row text-center" id="no-border">
<div class="col-xs-4 bg-color cursor-pointer">
<span>   .</span>
</div>
<div class="col-xs-4 cursor-pointer">
<span>0</span>
</div>
<div class="col-xs-4 no-border-right bg-color cursor-pointer">
<span class="glyphicon glyphicon-remove-sign"></span>
</div>
</div>
</div>
CSS styling:
.fixed-heading{
left: 0;
right: 0;
margin: auto;
max-width: 375px;
position: fixed;
width: 100%;
z-index: 25;
border-bottom: 1px inset seashell;
}
.back-button{
cursor:pointer;
position: absolute;
top: 9px;
}
.pin{
background-color: #f2f2f2;
height: 300px;
}
.row{
border-bottom: 1px inset;
padding-bottom: -2px;
font-size: xx-large;
}
.row.pin{
border-bottom: none;
border-right: none;
font-size: small;
padding: 80px;
}
p{
font-size: small;
margin-top: -8px;
}
.col-xs-4{
border-right: 1px inset;
}
#no-border{
border-bottom: none;
}
.no-border-right{
border-right: none;
}
.bg-color{
background-color: #f2f2f2;
}
.line{
border: 2px solid grey;
width: 25px;
}
.row.pin span{
margin-left: 8px;
}
.glyphicon.glyphicon-remove-sign{
margin-top: 5px;
}
My current setup utilizes Bootstrap 3.3.7 and Angular 4.2.2.