কৌণিক 9 এ ডায়নামিক টেবিল উপাদান কীভাবে তৈরি করবেন?

যদি আপনি একটি কৌণিক প্রকল্পে কাজ করে থাকেন তবে বেশ কয়েকটি পৃষ্ঠাগুলি থাকবে যেখানে টেবিলের কাঠামো ব্যবহার করে ডেটা উপস্থাপন করা হবে।

আমরা যে লাইব্রেরিটি গ্রহণ করতে পারি তার মধ্যে একটি হল কৌণিক উপাদান গ্রন্থাগার (ম্যাটিরিয়াল.আঙ্গুলার.ইও)। উপাদান গ্রন্থাগারের টেবিল উপাদানটি কেবল প্রদত্ত ডেটা সহ আমাদের জীবনকে কেবল একটি টেবিল তৈরি করা সহজ করে তুলবে না, যেমন বিন্যাসে প্যাজিনেশন, বাছাইকরণ এবং অনুসন্ধান ক্রিয়াকলাপগুলির মতো মৌলিক কার্যকারিতা একীভূত করে দেয়

ডিআরওয়াই (আপনার কোডটির পুনরাবৃত্তি করবেন না) নীতির সাথে সামঞ্জস্য রাখতে, আসুন আমরা একটি গতিশীল মাদুর-টেবিল উপাদান বিকাশ করি এবং যেখানে প্রয়োজন সেখানে এটি পুনরায় ব্যবহার করুন।

আরও অগ্রগতি ব্যতীত, চলুন কোডের মধ্যে ঝাঁপ দাও একটি গতিশীল উপাদান টেবিল উপাদান যা প্রকল্পের components উপাদানগুলিতে ব্যবহার করা যেতে পারে build

প্রথমত, এনজি নতুন ব্যবহার করে একটি কৌণিক প্রকল্প তৈরি করুন কমান্ড। কৌনিকটির সর্বশেষতম স্থিতিশীল সংস্করণটি ভি 9.0.6

দ্বিতীয়ত, প্রকল্প ডিরেক্টরিতে এনপিএম ইনস্টল --save @ কৌনিক / উপাদান কমান্ড চালিয়ে কৌণিক-উপাদান লাইব্রেরি ইনস্টল করুন। কৌণিক-উপাদানের সর্বশেষতম সংস্করণটি V9.1.2

package.json

আসুন আমরা এনজি জিসি ম্যাট-টেবিল কমান্ডটি ব্যবহার করে একটি টেবিল উপাদান তৈরি করব যা ম্যাট-টেবিল উপাদানটি সামঞ্জস্য করতে অ্যাপ.মডিউল.ট উপাদানগুলির ঘোষণাকে আপডেট করবে।

এফওয়াইআই: উপরের কমান্ডে এনজি জিসি ; g জেনারেটের জন্য সংক্ষিপ্ত এবং উপাদানগুলির জন্য সি ছোট

এই মুহুর্তে, অ্যাপ্লিকেশন.মডিউল.টসগুলিতে ম্যাটবেলমডুল আমদানি করার জন্য আমাদের এগিয়ে যাওয়া উচিত। নিম্নলিখিত কোডটিতে টেবিল মডিউল এবং উপাদানগুলি প্রকল্পে আমদানি করা হবে। যদি আপনি একটি ত্রুটি দেখতে পান 'মডিউল @ অ্যাঙ্গুলার / সিডিকে / টেবিলটি খুঁজে না পেয়ে "এগিয়ে যান এবং এনএমপি আই @ অ্যাঙ্গুলার / সিডি কে কমান্ডটি ব্যবহার করে @ কৌনিক / সিডিকে ইনস্টল করুন।

AppModule.ts

আপনি যদি ইতিমধ্যে শুরু না করে থাকেন তবে নতুন ট্যাবে প্রকল্পটি শুরু করতে এনজি সার্ভিস -o ব্যবহার করে প্রজেক্টটি চালান।

দ্রষ্টব্য: আপনি যদি আপনার প্রকল্পে কৌণিক V8.x ব্যবহার করছেন, আপনি যদি কোনও ত্রুটিটি দেখতে পান তবে চিন্তা করবেন না: "ত্রুটি টিএস 1086: একটি অ্যাক্সেসরকে পরিবেষ্টনের প্রসঙ্গে ঘোষণা করা যাবে না।" আপনি যখন কৌনিক / উপাদান ইনস্টল করেছেন, তখন সিএমএল এনপিএম সংগ্রহস্থল থেকে সর্বশেষতম ভি 9.X এনেছে। এই ত্রুটিটি সমাধানের জন্য, নিশ্চিত হয়ে নিন যে আপনার @ কৌণিক / ক্লিটি এবং @ কৌনিক / মূল সংস্করণগুলি এনজিআল্ড @ কৌনিক / কোর @ কৌনিক / ক্লাইম কমান্ড ব্যবহার করে @ কৌণিক / উপাদান সংস্করণের সাথে ইনলাইন রয়েছে। কোর, সিএলআই এবং ম্যাটেরিয়াল লিব সংস্করণগুলি 9.0.0 সংস্করণে রয়েছে কিনা তা আপনি প্যাকেজ.জসন চেক করতে পারেন।

উপরের উপাদানগুলি আমাদের প্রকল্পের মধ্যে সামগ্রিক bষধ সেটআপকে সংহত করবে।

এই মুহুর্তে, বেসিক টেবিল কাঠামোটি বিকাশ করতে মাদুর-টেবিল উপাদানটিতে নেভিগেট করুন। আমরা মক-ডেটা নিয়ে আসতে পারি যা টেবিলে প্রদর্শন করতে ব্যবহৃত হতে পারে। এছাড়াও নতুন ম্যাটবেলডেটা সোর্স () কনস্ট্রাক্টর ব্যবহার করে মক-ডেটা শুরু করুন, আমরা রেখাটি নীচের কারণটি নিয়ে আলোচনা করব।

ডেটা রেন্ডার করতে আসুন আমরা টেবিলের এইচটিএমএল দিকটি তৈরি করি। নিম্নলিখিত কোডটি আপাতত কাজ করবে:

নির্বাচক ট্যাগ ব্যবহার করে app.componal.ts এ মাদুর-টেবিল উপাদানটি রেন্ডার করুন টেবিল প্রদর্শন করতে

নিম্নলিখিত আউটপুট যা ব্রাউজারে লোকালহোস্টে প্রদর্শিত হবে: 4200:

ব্রাউজার আউটপুট

এই মুহুর্তে, যদি আমাদের 15-25 কলাম সহ একটি টেবিলটি পুনরুদ্ধার করতে হয় তবে আমাদের এটির পুনরাবৃত্তি করতে হবে মাদুর টেবিল কোড টুকরা। উপাদান হিসাবে html হিসাবে অনেক কলাম। দীর্ঘ সময় ধরে এইচটিএমএল কোড বজায় রাখা কঠিন হবে।

আমরা স্বয়ংক্রিয়ভাবে এই সমস্যাটি কাটিয়ে উঠতে পারি কোড টুকরাটি আমরা টেবিলডাটাতে যতগুলি কলামগুলি রেন্ডার করতে পারি। এটি অর্জনের জন্য, মাদুর টেবিল ডটকম অংশটি html এ যান এবং নিম্নলিখিত পরিবর্তনগুলি করুন:

উপরের কোড থেকে, আমরা টেবিলে ম্যাটকালামডিফ বৈশিষ্ট্য নির্ধারণের জন্য টেবিলকোলগুলির একটি তালিকা দিয়ে লুপ করেছি। আমরা ম্যাটসেলডেফের প্রোফাইল অবজেক্ট থেকে সংশ্লিষ্ট মান আনতে কলামের নাম কী ব্যবহার করেছি যা এক্ষেত্রে সারি ডেটা করে।

দ্রষ্টব্য: শিরোনাম অক্ষরের প্রথম অক্ষরটি তৈরি করার জন্য টাইটেলিকেস একটি অন্তর্নির্মিত পাইপ যা কৌনিক দ্বারা সরবরাহ করা হয়

আপনি কি এইচটিএমএল কোডের লাইনগুলির সংখ্যাটি ভাবতে পারেন যদি আমাদের দেখানোর জন্য 7-15 টি কলাম থাকে তবে এটি এন্টারপ্রাইজ অ্যাপ্লিকেশনগুলির 60% ক্ষেত্রে বাস্তবতা? আরও একটি বিষয় মনে রাখবেন, যদি আমাদের একটি নতুন কলাম যুক্ত করতে হয়, আমরা কেবল মাদুর টেবিল ডেটা বিভাগে টেবিলডাটা সম্পত্তিতে প্রতিটি রেকর্ডে এটিকে যুক্ত করতে পারি এবং নতুন কলামের নাম সহ টেবিলকোলগুলি আপডেট করতে পারি। এটি হ'ল, নতুন ডেটা যুক্ত না করে টেবিলটিতে রেন্ডার করা হবে ... এইচটিএমএল স্কিমের প্রতিটি নতুন কলামের জন্য কোডের একটি অংশ।

এই মুহুর্তে, আমি আশা করি আপনি যেমন আমার মত একই পৃষ্ঠায় রয়েছেন। আরও ভাল অভিজ্ঞতার জন্য নিখরচায় কোড অনুভব করুন।

ম্যাটবেলডেটা সোর্সটি ব্যবহার করার কারণটি হ'ল, ছককে বাছাইকরণ, পৃষ্ঠাগুলি স্থাপন এবং অনুসন্ধান একীভূত করা সহজ। অন্যথায় আমাদের ডেটা সংশোধন করতে এবং সেই অনুসারে ভিউ আপডেট করার জন্য সংশ্লিষ্ট ফাংশনগুলি সংজ্ঞায়িত করে ম্যানুয়ালি এই ক্রিয়াকলাপগুলি সম্পাদন করা দরকার।

আসুন এগিয়ে চলুন এবং টেবিলের উপাদানগুলিতে বাছাই কার্যকারিতা যুক্ত করুন। মাদুর-টেবিল.কম্পোনেন্ট.টিসের ভিতরে আসুন নীচের কোডটির লাইন যুক্ত করুন:

@ ভিউচিল্ড (ম্যাটসোর্ট, {স্ট্যাটিক: ট্রু}) সাজান: ম্যাটসোর্ট; আমি আশা করি আপনি কৌণিক থেকে ভিউচিল্ড সাজসজ্জার সম্পর্কে অবগত আছেন; যদি না হয় তবে দয়া করে https://angular.io/api/core/ViewChild দেখুন

আরে, আমি চাই আপনি থামুন এবং এক মুহুর্তের জন্য এখানে চিন্তা করুন। আমরা কি কিছু মিস করছি হুম… .বুই কি? হ্যাঁ হ্যাঁ, আমি কীভাবে ম্যাটসর্টমডুলকে @ কৌণিক / উপাদান / সাজানোর থেকে অ্যাপ্লিকেশনটিতে যোগ করতে পারি না mod

তদ্ব্যতীত, উপরে ঘোষিত ভিউচিল্ড প্রকারের সম্পত্তিটিকে টেবিলডেটসআরসি-র সাজ্ট নিম্নলিখিত হিসাবে নির্ধারণ করুন:

বাছাইয়ের জন্য মাদুর টেবিল ডেস্কটপ.কমেন্ট.টি আপডেট হয়েছে

এছাড়াও, আমাদের এইচটিএমএলে কোডটি আপডেট করতে হবে ম্যাটসোর্ট নির্দেশিকাতে নীচে ট্যাগ এবং ম্যাট-সাজানোর-শিরোনাম:

বাছাইয়ের সাথে মাদুর টেবিল ডেস্কটপ

এছাড়াও, মনে রাখবেন, আমরা যদি টেবিলটি স্বয়ংক্রিয় না করে থাকি কোডের অংশ হিসাবে, আমাদের প্রত্যেকটি কলামটি মাদুর-বাছাই-শিরোনামের নির্দেশের সাথে আপডেট করতে হবে।

এই সময়ে, এগিয়ে যান এবং ব্রাউজারে সারণী শিরোনামগুলির সাথে প্রায় খেলুন। আপনি ব্রাউজার কনসোলে একটি ত্রুটি লক্ষ্য করতে পারেন, এটি তীর অ্যানিমেশন সম্পর্কে অভিযোগ করতে পারে। এই ত্রুটিটি কাটিয়ে ওঠার জন্য app.module.ts এ ব্রাউজারঅ্যানিমেশনমডিয়ুল আমদানি করুন

আপনি যদি রোডম্যাপটি মনে রাখেন তবে পরের কাজটি হল পৃষ্ঠাগুলির কার্যকারিতাটি টেবিলের সাথে সংহত করা। চলুন যে কাজ করা working

এই কাজের জন্য, আমাদের যুক্ত করা দরকার টেবিল এইচটিএমএলকে নিম্নলিখিতভাবে ট্যাগ করুন:

পৃষ্ঠাসমূহের জন্য মাদুর টেবিল ডেস্কটপ

টেবিলডেটাএসসিআরতে বাছাই করা সম্পত্তিটি আপডেট করার অনুরূপ, প্যাগিনেশন সংহত করতে আমাদের প্যাগেইনেটর সম্পত্তি আপডেট করতে হবে। নিম্নলিখিতগুলি একই বুঝতে সাহায্য করবে:

পৃষ্ঠাসমূহের জন্য মাদুর টেবিল ডেস্কটপ.কমেন্ট.টি আপডেট করুন

আমি জানি আপনি ম্যাটপ্যাগেইনেটর মডুলেল আছে কিনা তা নিয়ে ভাববেন। একটি ধনুক নিন, আপনি সঠিক পথে আছেন। এগিয়ে যান এবং app.module.ts আপডেট করুন

এখন, মাদুর-সারণিতে অনুসন্ধান কার্যকারিতা একীভূত করা যাক:

অনুসন্ধান কার্যকারিতা সহ মাদুর টেবিল ডেস্কটপ

মাদুর টেবিল ডটকমপিটনেটস.টসটি অন সন্ধান ইনপুট () fn এর সাথে আপডেট হয়েছে:

অনুসন্ধান কার্যকারিতা সহ মাদুর টেবিল.কম্পোনেন্ট.টি আপডেট হয়েছে

টেবিলের ডেটা এবং টেবিল কলামের নামগুলি গতিশীল করতে, নীচের মত মাদুর-টেল ডটকমপিটেন্ট.সেট কোড আপডেট করুন:

@ ইনপুট () ব্যবহার করে গতিশীল ইনপুট হতে টেবিলডেটা এবং ট্যাবকলগুলি আপডেট করুন

আপনি যদি উপরের কোডটি পর্যবেক্ষণ করেন তবে আমরা আর মাদুর টেবিল ডটকমপিটেন্ট.টিস থেকে ডেটা পাচ্ছি না বরং আমরা অ্যাপ.কম্পোনেন্ট.টিস থেকে ডেটা খাচ্ছি are

App.componal.ts / এইচটিএমএল কোডটি দেখুন:

app.componal.ts টেবিলের ডেটা সহইনপুট ট্যাগ টেবিলডাটা এবং টেবিলকলামগুলি ইনপুটগুলি দেখুন

বুম !! আমরা বাছাই করুন, পৃষ্ঠা এবং সংক্ষিপ্তসার কার্যকারিতা সহ গতিশীল মাদুর-টেবিল উপাদান কোডিং সম্পন্ন করেছি।

শৈলী এবং ফন্ট একীকরণের পরে ব্রাউজারে চূড়ান্ত আউটপুট

আমরা যদি আরও একটি রাখি ম্যাট-টেবিলকে খাওয়ানো আলাদা ডেটা সহ অ্যাপ.কম্পোন্ট html এ নির্বাচক আমরা ব্রাউজারে নিম্নলিখিতটি রেন্ডার করে দেখি:

ব্রাউজার একই মাদুর-টেবিল উপাদান সহ বিভিন্ন ডেটা রেন্ডার করে

উপরের টেবিলটি রেন্ডার করার জন্য নীচে কোডটি দেওয়া হল:

অ্যাপ্লিকেশান-component.htmlঅ্যাপ্লিকেশন উপাদানগুলির দ্বিতীয় সারণী ডেটা

উপরের কোড থেকে, আমরা নিশ্চিত যে মাদুর-টেবিল উপাদানটিতে দেওয়া কলাম এবং ডেটা নির্বিশেষে এটি ব্রাউজারে টেবিলটি রেন্ডার করতে পারে। আমরা প্রকল্পের বিভিন্ন অংশে একই উপমা ব্যবহার করতে পারি।

আমি জানি এটি একটি দীর্ঘ নিবন্ধ । ক্রিয়াকলাপ সম্পাদন করতে কয়েকটি রেকর্ড নির্বাচন করার জন্য চেকবক্সগুলি রাখতে গতিশীলরূপে বিকল্পগুলি সরবরাহ করতে টেবিল কোডটি উন্নত করতে টেবিল কোডটি বাড়ানোর জন্য পরবর্তী নিবন্ধে চলুন তদুপরি, আমরা কৌণিক রাউটিং ব্যবহার করে রেকর্ড সুনির্দিষ্ট বিবরণ দেখতে প্রতিটি সারিতে গতিশীল বোতাম রাখার ক্ষমতাও একীভূত করব।

আপনার সময়ের জন্য ধন্যবাদ, আমি আশা করি আপনি নতুন এবং দরকারী কিছু শিখেছেন। ততক্ষণ পর্যন্ত যত্ন নিন, আপনার দিনটি খুব ভাল সময় কাটান

আপনি আমার গিটহাবটিতে কোডটি পেতে পারেন: https://github.com/HarshaChinni/ng-dynamic-matory-table

এফওয়াইআই: সঠিকভাবে কাজ করতে আপনাকে উপাদান-গ্রন্থাগার শৈলীর জন্য রোবোটো ফন্ট এবং উপাদান থিমগুলি আমদানি করতে হবে। আরও বুঝতে অনুগ্রহ করে সূচি.চ.টি.এম.এল এবং স্টাইলস.এস.এস. ফাইলগুলি দিয়ে যান।

তথ্যসূত্র:

  1. https://angular.io/docs
  2. https://material.angular.io/components/table/overview#getting-started
  3. https://material.angular.io/guide/getting-started
আমি কীভাবে আমার মানসিক দৃness়তা, কৌতুক এবং প্রতিকূলতা মোকাবিলার দক্ষতা অর্জন করতে পারি? কোনও পূর্ব অভিজ্ঞতা এবং মাত্র এক মাসের দুর্বল প্রশিক্ষণ ছাড়াই একটি নতুন ওয়েব প্রকল্পের পূর্ণ স্ট্যাকটিতে দ্রুত অবদানের জন্য একজন তাজা বিকাশকারীকে কত সময় প্রয়োজন? আমরা কীভাবে পিএইচপি-তে এমন একটি সিস্টেম তৈরি করতে পারি যে কোনও ব্যবহারকারী কেবল তার নিবন্ধিত মেশিনের মাধ্যমে লগইন করতে পারে? ওয়ার্ডপ্রেসে আপনি কীভাবে একটি ওয়েবসাইট তৈরি করতে পারেন, যা প্রথমত উইক্সে তৈরি অন্য ওয়েবসাইটের মতো বা অনুরূপ? এমন কোনও ব্যক্তি যা কীভাবে একই সাথে ওয়েবসাইট, অ্যাপস এবং গেমস কোড তৈরি করতে জানে?