fix(query-builder): apply resource strings to header properly -17.2.x (#14731)

* fix(query-builder): apply resource strings to header properly
* fix(query-builder): add header import in dev demo

Author: teodosiah

projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.html

@@ -1,6 +1,6 @@
 <div class="igx-query-builder__header">
     <div class="ig-typography__h6" style="pointer-events: none;">
-        {{ title }}
+        {{ title || this.resourceStrings.igx_query_builder_title }}
         <ng-content></ng-content>
     </div>
     <div *ngIf="showLegend" class="igx-builder-legend" >

projects/igniteui-angular/src/lib/query-builder/query-builder.component.html

@@ -1,6 +1,6 @@
 <igx-query-builder-header
     *ngIf="!headerContent"
-    [title]="this.resourceStrings.igx_query_builder_title"
+    [resourceStrings]="this.resourceStrings"
 >
 </igx-query-builder-header>
 

src/app/query-builder/query-builder.sample.ts

@@ -7,7 +7,8 @@ import { FilteringExpressionsTree, IgxStringFilteringOperand,
     IExpressionTree,
     IgxButtonDirective,
     IgxButtonGroupComponent,
-    IgxRippleDirective} from 'igniteui-angular';
+    IgxRippleDirective,
+    IgxQueryBuilderHeaderComponent} from 'igniteui-angular';
 import { IgxResourceStringsFR } from 'igniteui-angular-i18n';
 
 @Component({
@@ -16,7 +17,7 @@ import { IgxResourceStringsFR } from 'igniteui-angular-i18n';
     styleUrls: ['query-builder.sample.scss'],
     templateUrl: 'query-builder.sample.html',
     standalone: true,
-    imports: [IgxButtonGroupComponent, IgxQueryBuilderComponent, IgxButtonDirective, IgxRippleDirective]
+    imports: [IgxButtonGroupComponent, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxButtonDirective, IgxRippleDirective]
 })
 export class QueryBuilderComponent implements OnInit {
     @ViewChild('queryBuilder', { static: true })