title: In Angular 2 how to fill a span when I click a div and change the text above when the span/p is full?
body: <p>I'm new in this community and I have a basic english, but I hope to make me understand. I just started studying Angular 2 and my question is this:</p>
  
  <p>I have created a keyboard and above there are 4 span each of which must contain a digit that will be clicked on the keyboard. Each time one of these keys is pressed (each key is a div) I would like that number to be displayed in one of these span, but I do not know how to do it. Also after pressing 4 numbers (and then filling the span) I would like the text above the span changes to another.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid fixed-heading"&gt;
     &lt;div class="back-button"&gt;
       &lt;img src="/assets/images/icon_arrow_left.png" (click)="back()" /&gt;
     &lt;/div&gt;
     &lt;app-main-app-header [heading]="'SETTINGS.SECURITY.PIN.HEADING'"&gt;{{"SETTINGS.SECURITY.PIN.HEADING"|translate}}&lt;/app-main-app-header&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid component"&gt;
  
    &lt;div class="row pin text-center"&gt;
  
      &lt;div&gt;
        &lt;span&gt;Here I would like to have the text&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="container-fluid"&gt;
        &lt;div class="col-xs-3"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;div class="line"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-3"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;div class="line"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-3"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;div class="line"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-3"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;div class="line"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="row text-center"&gt;
      &lt;div class="col-xs-4 cursor-pointer"&gt;
        &lt;span&gt;1&lt;/span&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4 cursor-pointer"&gt;
        &lt;span&gt;2&lt;/span&gt;
        &lt;p&gt;ABC&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4 no-border-right cursor-pointer"&gt;
        &lt;span&gt;3&lt;/span&gt;
        &lt;p&gt;DEF&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row text-center"&gt;
      &lt;div class="col-xs-4 cursor-pointer"&gt;
        &lt;span&gt;4&lt;/span&gt;
        &lt;p&gt;GHI&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4 cursor-pointer"&gt;
        &lt;span&gt;5&lt;/span&gt;
        &lt;p&gt;JKL&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4 no-border-right cursor-pointer"&gt;
        &lt;span&gt;6&lt;/span&gt;
        &lt;p&gt;MNO&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row text-center"&gt;
      &lt;div class="col-xs-4 cursor-pointer"&gt;
        &lt;span&gt;7&lt;/span&gt;
        &lt;p&gt;PQRS&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4 cursor-pointer"&gt;
        &lt;span&gt;8&lt;/span&gt;
        &lt;p&gt;TUV&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4 no-border-right cursor-pointer"&gt;
        &lt;span&gt;9&lt;/span&gt;
        &lt;p&gt;WXYZ&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row text-center" id="no-border"&gt;
      &lt;div class="col-xs-4 bg-color cursor-pointer"&gt;
        &lt;span&gt;&amp;emsp;&amp;ensp;&amp;ensp;.&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-4 cursor-pointer"&gt;
        &lt;span&gt;0&lt;/span&gt;
      &lt;/div&gt;
       &lt;div class="col-xs-4 no-border-right bg-color cursor-pointer"&gt;
        &lt;span class="glyphicon glyphicon-remove-sign"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.fixed-heading{
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */
    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;
  }
  </code></pre>
  
  <p>I'm using Bootstrap 3.3.7 and Angular 4.2.2.</p>