ng mat search bar
Add feature of custom placeholder
يقوم المكون بإنشاء رمز بحث يقوم بتوسيع حقل البحث عند النقر. انظر العرض التوضيحي للتأثير:
تثبيت التبعية عبر npm:
npm install ng-mat-search-bar --saveأو الغزل
yarn add ng-mat-search-barوقم باستيراد الوحدة إلى تطبيقاتك app.module.ts مثل هذا:
import { NgMatSearchBarModule } from 'ng-mat-search-bar' ;
...
@ NgModule ( {
... ,
imports : [
... ,
NgMatSearchBarModule
] ,
...
} ) تأكد أيضًا من استيراد BrowserAnimationsModule في app.module.ts ، وإلا فلن تعمل الرسوم المتحركة!
تحتاج أيضًا إلى إضافة خط ويب لأيقونات المواد عن طريق إضافة
< link
href =" https://fonts.googleapis.com/icon?family=Material+Icons "
rel =" stylesheet "
/>إلى ملف Index.html الخاص بك.
يمكنك استخدام المكون مع محدده:
<mat-search-bar></mat-search-bar>
يمكنك الاشتراك في الأحداث المختلفة التي يقوم المكون بإخراجها:
كما يوفر طريقتين عامتين لفتح/إغلاق شريط البحث:
و عقار :
يمكنك استخدامه مع ReactiveFormsModule، عن طريق تمرير FormControl كمدخل: على سبيل المثال
...
< mat-search-bar [formControl] =" control " > </ mat-search-bar >
...وفي ملف .ts:
...@ Component ( { } ) ...
control: FormControl = new FormControl ( '' ) ;
... يمكنك أيضًا استخدامه مع الإكمال التلقائي للمواد Angular (https://material.angular.io/components/autocomplete/overview). ما عليك سوى استخدامه كما هو موضح في مستندات Angular واستخدام mat-search-bar كمدخل له. كما يمكنك التحقق من app.component.html/.ts على سبيل المثال الكود: https://github.com/tommueller/ng-mat-search-bar/blob/master/src/app/
من فضلك لا تتردد في رفع مشكلة أو إرسال العلاقات العامة إذا كان لديك أي تحسينات أو وجدت أخطاء.
