Parameters in Blazor are used to pass data from a parent component to a child component. They are defined using public properties on a component and decorated with the Non-complex objects such as integers, strings, and booleans can be passed as parameters. Here\u2019s an example:<\/p>\n\n\n\n In this example, the Complex objects such as lists, custom classes, or arrays can also be passed as parameters. Here\u2019s an example:<\/p>\n\n\n\n In this example, Here\u2019s the code for a In this component, Here\u2019s the code for a In this component, Blazor components and parameters are fundamental concepts in Blazor applications. Understanding how to use them is crucial for building interactive and dynamic web UIs. Whether you\u2019re passing simple integers or complex objects, Blazor provides the flexibility and power you need to build your applications.<\/p>\n\n\n\n I hope this helps! Let me know if you have any questions or need further clarification on any points. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":" Understanding Parameters Parameters in Blazor are used to pass data from a parent component to a child component. They are defined using public properties on a component and decorated with the [Parameter] attribute. Non-Complex Objects Non-complex objects such as integers, strings, and booleans can be passed as parameters. Here\u2019s an example: In this example, the…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[2],"tags":[13,45,16,46],"class_list":["post-370","post","type-post","status-publish","format-standard","hentry","category-net","tag-blazor","tag-component","tag-dotnet","tag-parameter"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":115,"url":"https:\/\/archicode.be\/index.php\/2019\/10\/02\/how-to-blazor-components-basic\/","url_meta":{"origin":370,"position":0},"title":"How to : Blazor components (basic)","author":"Hakim","date":"October 2, 2019","format":false,"excerpt":"One essential aspect of Blazor are components. They are basically your Blazor code container. This is where you put the UI and the code needed for your UI to behave the way you want it to. You can dissociate the code from the UI but it's not mandatory. For small\u2026","rel":"","context":"In "Uncategorised"","block_context":{"text":"Uncategorised","link":"https:\/\/archicode.be\/index.php\/category\/uncategorised\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324,"url":"https:\/\/archicode.be\/index.php\/2023\/11\/07\/how-to-use-feature-flags-in-blazor\/","url_meta":{"origin":370,"position":1},"title":"How to use Feature Flags in Blazor","author":"Hakim","date":"November 7, 2023","format":false,"excerpt":"Feature flags are a way of controlling the availability and behavior of features in your application without changing the code. They can help you with testing, experimentation, and gradual rollout of new functionality. Blazor is a framework for building interactive web UIs using C# and .NET. In this blog post,\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/archicode.be\/wp-content\/uploads\/2023\/11\/4b6f8d86-a588-4313-8cc9-4c41a90aaae5.jpeg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":366,"url":"https:\/\/archicode.be\/index.php\/2024\/05\/11\/understanding-inject-in-blazor-components\/","url_meta":{"origin":370,"position":2},"title":"Understanding @inject in Blazor Components","author":"Hakim","date":"May 11, 2024","format":false,"excerpt":"Blazor, Microsoft\u2019s framework for building interactive client-side web UI with .NET, offers a robust solution for dependency injection (DI) in the form of the\u00a0@inject\u00a0directive. This powerful feature allows developers to inject services directly into their components, promoting a clean and modular architecture. What is Dependency Injection? Dependency Injection (DI) is\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":92,"url":"https:\/\/archicode.be\/index.php\/2019\/06\/10\/how-to-blazorify-an-existing-mvc-app\/","url_meta":{"origin":370,"position":3},"title":"How to blazorify an existing mvc app","author":"Hakim","date":"June 10, 2019","format":false,"excerpt":"Blazor is awesome. \u00a0If you don't know what it is, you can check it out here\u00a0but to summarize, it's a framework that allows .net code to run in your browser using the power of Web Assembly. I've found a lot of tutorials using the official blazor templates but only hints\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"migrate_solution_to_dotnet_core_3.gif","src":"\/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif","width":350,"height":200,"srcset":"\/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 1x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 1.5x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 2x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 3x, \/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif 4x"},"classes":[]},{"id":162,"url":"https:\/\/archicode.be\/index.php\/2020\/06\/30\/blazor-server-side-or-web-assembly\/","url_meta":{"origin":370,"position":4},"title":"Blazor : server-side or Web assembly","author":"Hakim","date":"June 30, 2020","format":false,"excerpt":"Blazor is amazing. But if you are wondering which of Web Assembly of Server-Side would suit your project, here's an attempt to explain and help","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":163,"url":"https:\/\/archicode.be\/index.php\/2020\/07\/07\/blazor-convince-your-architect\/","url_meta":{"origin":370,"position":5},"title":"Blazor : convince your CTO (or whomever takes the technical decisions)","author":"Hakim","date":"July 7, 2020","format":false,"excerpt":"When there is something new on the market, we developers want to work with it. There might be several reasons for that, but not always the shortcut decision makers think we favour, which is wanting to try the new shiny thing. Most of the time, we want to work with\u2026","rel":"","context":"In ".NET"","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/comments?post=370"}],"version-history":[{"count":5,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/370\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/370\/revisions\/375"}],"wp:attachment":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/media?parent=370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/categories?post=370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/tags?post=370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}[Parameter]<\/code> attribute.<\/p>\n\n\n\nNon-Complex Objects<\/h3>\n\n\n\n
@page \"\/example\"\n<ChildComponent Title=\"Hello, World!\" \/>\n\n<\/code><\/pre>\n\n\n\nTitle<\/code> parameter is a non-complex object (a string), and we\u2019re passing the value \u201cHello, World!\u201d to it.<\/p>\n\n\n\nComplex Objects<\/h3>\n\n\n\n
@page \"\/example\"\n<ChildComponent Employee=\"Employee\" \/>\n\n@code {\n public Employee Employee { get; set; }\n\n protected override void OnInitialized()\n {\n Employee = new Employee { Id = 1, Name = \"John Doe\", Role = \"Developer\" };\n }\n}\n<\/code><\/pre>\n\n\n\nEmployee<\/code> is a complex object. We\u2019re creating a new Employee<\/code> object and passing it as a parameter to the ChildComponent<\/code>.<\/p>\n\n\n\nChildComponent with Non-Complex Parameter<\/h2>\n\n\n\n
ChildComponent<\/code> that accepts a non-complex parameter:<\/p>\n\n\n\n<h1>@Title<\/h1>\n@code {\n [Parameter]\n public string Title { get; set; }\n}\n<\/code><\/pre>\n\n\n\nTitle<\/code> is a parameter that you can pass a string value to.<\/p>\n\n\n\nChildComponent with Complex Parameter<\/h2>\n\n\n\n
ChildComponent<\/code> that accepts a complex parameter:<\/p>\n\n\n\n<h1>@Employee.Name<\/h1>\n<h2>@Employee.Role<\/h2>\n\n@code {\n [Parameter]\n public Employee Employee { get; set; }\n}\n<\/code><\/pre>\n\n\n\nEmployee<\/code> is a parameter that you can pass an Employee<\/code> object to. The Employee<\/code> class might look something like this:<\/p>\n\n\n\npublic class Employee\n{\n public int Id { get; set; }\n public string Name { get; set; }\n public string Role { get; set; }\n}\n<\/code><\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n