chore(select): panel class example not working and pluralize custom trigger (#11999)

* Fixes the "Custom panel class" example not working due to style encapsulation.
* Pluralizes the example in the "Custom trigger" demo.

Author: crisbeto

src/material-examples/select-custom-trigger/select-custom-trigger-example.html

@@ -3,7 +3,7 @@
     <mat-select-trigger>
       {{toppings.value ? toppings.value[0] : ''}}
       <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
-        (+{{toppings.value.length - 1}} others)
+        (+{{toppings.value.length - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
       </span>
     </mat-select-trigger>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>

src/material-examples/select-panel-class/select-panel-class-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import {FormControl} from '@angular/forms';
 
 /**
@@ -8,6 +8,9 @@ import {FormControl} from '@angular/forms';
   selector: 'select-panel-class-example',
   templateUrl: 'select-panel-class-example.html',
   styleUrls: ['select-panel-class-example.css'],
+  // Encapsulation has to be disabled in order for the
+  // component style to apply to the select panel.
+  encapsulation: ViewEncapsulation.None,
 })
 export class SelectPanelClassExample {
   panelColor = new FormControl('red');