LINked in Qstns

 ng build --configura=produc --prog=fa;se

component and directive diffrnc

provide ,userclase

provde ,useexisting:looger

routermodule.forroot

paramMap and queryparamap on the activaedrout class

angular conditions

 dont use 

this.istrue=!this.istrue

some cases it will update wrong way..

this.istrue=true; ///correct way

sql know table dependencies

  sp_depends 'Appraisals'

 GO

bs Datepicker

 

In this video we will discuss customising the ngx-bootstrap datepicker component with an example. This is continuation to Part 11. Please watch Part 11 from Angular CRUD tutorial before proceeding.

At the moment we have date range picker. Use bsDatepicker directive instead of bsDaterangepicker directive on the input element so we can capture single date i.e the Date of Birth of the employee.

<div class="form-group">

  <label for="dateOfBirth">Date of Birth</label>

  <input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth"

          class="form-control" type="text" bsDatepicker  />

</div>

Changing ngx-bootstrap datepicker theme : At the moment, the Datepicker is using the default green theme. We want to change it to dark-blue theme, so it matches with the rest of the form. As of this recording ngx-bootstrap datepicker component has the following 6 color schemes.

1. theme-default
2. theme-green
3. theme-blue
4. theme-dark-blue
5. theme-red
6. theme-orange

We can change the default colour-scheme, by manipulating containerClass property in bsConfig object. Here are the steps.

Step 1 : Make the following changes in CreateEmployeeComponent class (i.e create-employee.component.ts file)

// Import BsDatepickerConfig type. This is the Config object for datepicker. Using this

// config object we can set minDate, maxDate, whether to show/hide week numbers and

// change the color theme using the containerClass property.

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

// In the CreateEmployeeComponent class make the following changes

export class CreateEmployeeComponent implements OnInit {

  // create a property of type Partial<BsDatepickerConfig>

  datePickerConfig: Partial<BsDatepickerConfig>;

  // In the constructor set containerClass property to the preferred theme

  constructor() {

    this.datePickerConfig = Object.assign({}, { containerClass: 'theme-dark-blue' });

   }

   // Rest of the code...

}

Please note : 
We are using the TypeScript partial type here to set only the "containerClass" property of BsDatepickerConfig object. To learn more about the partial type please refer to the following article.
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

Object.assign() copies the property values from one or more source objects to a target object. The target object is the first parameter and the rest are the sources. Object.assign() is useful for merging objects or cloning them shallowly.

Step 2 : In the view template (i.e in create-employee.component.html file) bind the "datePickerConfig" property in the component class we created above in Step 1, to the bsConfig input property.

<div class="form-group">

  <label for="dateOfBirth">Date of Birth</label>

  <input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth"

          class="form-control" type="text" bsDatepicker [bsConfig]="datePickerConfig" />

</div>

At this point, you should see the Datepicker using the dark-blue theme colour as shown below.


Showing or hiding week numbers : By default, the weeknumber are displayed. If you want to hide them, all you have to do is set "showWeekNumbers" boolean property to false in the config object as shown below. 

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      showWeekNumbers: false

    });

}

You can find all the properties of the config object at the following page. 
https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker.config.ts

Along the same lines we can also set the min and max dates. Please note that the month numbers start from 0 and not 1. So for January it is 0, February it is 1, so on and so forth.

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      showWeekNumbers: true,

      minDate: new Date(2018, 0, 1),

      maxDate: new Date(2018, 11, 31),

    });

}

To change the date format, use dateInputFormat property of the config object. 

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      showWeekNumbers: true,

      minDate: new Date(2018, 0, 1),

      maxDate: new Date(2018, 11, 31),

      dateInputFormat: 'DD/MM/YYYY'

    });

}

To set a default date, create a property (dateOfBirth) in the component class and set it to the default value you want. Since we are using 2 way databinding, the defualt date is displayed in the corresponding input field when them form loads. In this case we have set default date to January 30, 2018.

dateOfBirth: Date = new Date(2018, 0, 30);

At the moment, the "Date of Birth" input element is spanning across the entire width of the form. There are sevral options to limit it's width. One option is to use the Bootstrap row and grid classes (Example: col-md-4, col-md-5, etc...)

<div class="row">

  <div class="form-group col-md-4">

    <label for="dateOfBirth">Date of Birth</label>

    <input id="dateOfBirth"  name="dateOfBirth" [(ngModel)]="dateOfBirth"

           class="form-control" type="text" bsDatepicker

           [bsConfig]="datePickerConfig" />

  </div>

</div>

To control the placement of the Datepicker use the placement property. The allowed values are "top" | "bottom" | "left" | "right". The default is "bottom".

For our form we do not want a default date to be set. So please remove the dateOfBirth property from the component class. We also do not want minDate and maxDate, so delete these properties as well from the datePickerConfig object. Also delete, showWeekNumbers property as it is set to true by default. This means our datePickerConfig object in the constructor has just 2 properties (dateInputFormat and containerClass)

constructor() {

  this.datePickerConfig = Object.assign({},

    {

      containerClass: 'theme-dark-blue',

      dateInputFormat: 'DD/MM/YYYY'

    });

}

sql tools settnings

 Save table changes directly using tools settings.

SP For Create and update

CREATE PROCEDURE [dbo].[USP_AddCategory]  

    @ID INT,  

 @Category_ID nvarchar(50) = NULL,  

 @Category_Desc nvarchar(255) = NULL,  

 @UpdatedOn datetime = NULL,  

 @UpdatedBy nvarchar(150) = NULL,  

 @IsActive bit = NULL  

   

AS  

BEGIN  

 SET NOCOUNT ON;  

 BEGIN TRANSACTION [InsertCategoryDetails]  

 BEGIN TRY  

  --DECLARE @ID INT  

  

  IF NOT EXISTS (SELECT * FROM tbl_Category WHERE Category_ID = @Category_ID)  

  BEGIN  

   Insert Into tbl_Category (  

    Category_ID, Category_Desc, UpdatedOn, UpdatedBy, IsActive  

    )  

   Values (  

     @Category_ID, @Category_Desc, IsNull(@UpdatedOn,GetDate()), @UpdatedBy, IsNull(@IsActive,1)  

   )  

   SET @ID = (SELECT SCOPE_IDENTITY())  

   SELECT @ID AS ID, 'true' AS [Status], 'Category created successful' as [Message]   

  END     

  ELSE  

   SELECT '0' AS ID, 'false' AS [Status], 'The category is already existed' as [Message]   

  

 COMMIT TRANSACTION [InsertCategoryDetails]  

 END TRY  

    BEGIN CATCH  

 ROLLBACK TRANSACTION [InsertCategoryDetails]  

  SELECT '0' AS ID, 'false' AS [Status], 'Failed to save' as [Message]   

  INSERT INTO tbl_Errors(ErrorNumber,ErrorState,ErrorSeverity,ErrorLine,ErrorProcedure,ErrorMessage,ErrorDateTime )  

  SELECT    

   ERROR_NUMBER() AS ErrorNumber, ERROR_STATE() AS ErrorState, ERROR_SEVERITY() AS ErrorSeverity   

   ,ERROR_LINE() AS ErrorLine, ERROR_PROCEDURE() AS ErrorProcedure, ERROR_MESSAGE() AS ErrorMessage  

   ,GETDATE()  

    END CATCH  

END

Link

 https://learnentityframeworkcore.com/dbset/adding-data

Templates

 https://preadmin.dreamguystech.com/html/pos/template/index.html

https://preadmin.dreamguystech.com/html/crypto/template1/buy-crypto.html

https://themewagon.com/themes/template-collection-2022-one-hundred-free-html5-templates-in-one-bundle/